JS Ajax OnClick：如何多次执行php代码？

Question

I have an html button with an onclick attribute which runs a jQuery AJAX function pointing to php code.
The php code writes HTML in an output HTML <select> element(the element remains hidden until the javascript runs.)
This is working great to populate the <select> when an "add another" button is clicked.

The problem is it adds one and only one. I want to be able to have a new <select> tag populate with each click of the "add another" button up to a max of 2.
The JS in question:

var genre_dropdown = function genre_dropdown() {
  $('.genre_output').css('display', 'block');
  $.ajax({
      url:'../includes/functions/genre_dropdown.php',
      complete: function (response) {
      $('.genre_output').html(response.responseText);
      },
      error: function () {
          $('.genre_output').html('Bummer: there was an error!');
      }
  });
  return false;
}

The HTML in question:

  <select name="genre_id[]" autocomplete="off" class="genre_output"></select>
  <select name="genre_id[]" autocomplete="off" class="genre_output"></select>
  <div class="button add-genre-button" onclick="return genre_dropdown();">+ Add Existing Genre</div>

I thought I could include 2 html <select> elements for the php to populate into, the code would execute from one to the next. I see why this is not correct, the code is running in both at the same time. I'm at a place where I'm considering have 2 buttons ("add one", "add another") but that seems redundant and not correct, especially considering I want a scale-able technique (the max may not always be 2.) I need help.

Answer 1

Your php request is fine.

I simply mean define a variable as your using javascript i.e.:

var sel = '<select name="genre_id[]" autocomplete="off" class="genre_output">' + response + "</select>';

and then each time you do a request it will include the response as the value of the element. This would allow you to append the parent div as many times as you want. Finally, use a simple if counter to decide whether to keep appending or not:

if ($(".genre_output").length <= 2){
   $("PARENT_DIV_ID").append(sel);
};

Is this clearer? @kaari