title: Jquery HTML Select tag append repeats itself
body: <p>I have the following jquery script which is supposed to append option data to a select tag in html : </p>
  
  <p>The function works very well and it appends data to the  select tag but it does not empty the select tag with the previous loaded information when the function runs. How can I empty the select tag and append new data afresh and also include the please select option tag ? </p>
  
  <pre class="lang-js prettyprint-override"><code>setInterval(function() {
    get_client_list();
  }, 3000);
  
  function get_client_list() {
    client_list = '';
    $.ajax({
      type: "GET",
      url: "&lt;?php echo base_url(); ?&gt;operations/get_client_lists",
      dataType: "JSON",
      success: function(response) {
        $('#select_client_name').empty();
        client_list = '&lt;option&gt;Please select : &lt;/option&gt;';
        for (i = 0; i &lt; response.length; i++) {
          client_list += '&lt;option value="' + response[i].id + '"&gt;' + response[i].name + '&lt;/option&gt;';
          $('#select_client_name').append(client_list);
        }
  
  
      },
      error: function(response) {
  
      }
    });
  
  }
  </code></pre>