ajax and select element dropdown - html

Question

hello guys please i have an issue with ajax i have this function that fetch data from jsp but when i add a new data to the database and call the function again it duplicates the data unless i refresh the page which i don't want users to do
<script>
search1();
function search1(){
$.ajax({
type:"GET",
url:"drop.jsp",
dataType:'JSON',
data:{"title":'title'},
success:function(data){
console.log(data);
for(var i = 0; i< data.length; i++){
$('#title').append($("<option/>",
{
text: data[i].area,
}));
}
},
error(err){
alert("error")
}
});
}
</script>
it fetch's data as i want but when i call that same function with another function it duplicate the dropdown data the second function is below
<script>
function title2(){
$.ajax({
type:"POST",
url:"drop.jsp",
data:{"title1":$("#title1").val()},
success:function(msg){
var obj = JSON.parse(msg);
search1();
},
error(err){
alertify.error('Error');
}
})
}
</script>
and the jsp code is
String title = request.getParameter("title");
String marital = request.getParameter("marital");
String minis = request.getParameter("minis");
String occu = request.getParameter("occu");
String job = request.getParameter("job");
String bs = request.getParameter("bs");
String class1 = request.getParameter("class1");
String course = request.getParameter("course");
JSONArray list =new JSONArray();
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/cop","root","root");
Statement st = con.createStatement();
if(title != null){
String sql = "Select * from title";
ResultSet rs = st.executeQuery(sql);
while(rs.next()){
JSONObject obj = new JSONObject();
String area = rs.getString("title");
obj.put("area", area);
list.add(obj);
}
out.println(list.toJSONString());
out.flush();
}
and the output is in the image
the output