title: jQuery ajax request and html only display one time the data
body: <p>good day!</p>
  
  <p>I have a problem, this is when I click on my button for ajax request this works perfectly and display the data on my select item but, when I click again on the button for ajax request, this give the data (this is correct) but on my select item this show again the data so, I have the same data two times, how can I solve this? I´m new into JS and this is for my school project haha, so Thank u so much if u can help me! &lt;3</p>
  
  <p>this is my js code</p>
  
  <pre><code>  $("#hola").click( function(e) {
    e.preventDefault();
    $.ajax({
      method: 'GET',
      url: '/api/check-estudio/',
      data: {},
      dataType: 'json',
      cache: true,
      success: function(data) {
        for (var i=0; i&lt;data.length; i++) {
          console.log(data[i]);
          var optionHTML = '&lt;option&gt;' + data[i].name + '&lt;/option&gt;';
          $(".selectEstudio").append(optionHTML);
        }
      },
      error: function(xhr, resp, text) {
        console.log(xhr, resp, text);
      }
    });
  </code></pre>
  
  <p>When I click first time work perfectly and display my data on my select box and show the options.
  <a href="https://i.stack.imgur.com/nUl9Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nUl9Q.png" alt="Picture 1"></a></p>
  
  <p>When I close de modal and Click again the button for show modal and ajax request, display two times the same info.
  <a href="https://i.stack.imgur.com/0mBMP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0mBMP.png" alt="enter image description here"></a></p>
  
  <p>THANK U FOR YOUR TIME! &lt;3</p>