Changing options in a dynamically created select box JQuery

Question

Before I get started I know I need to delegate to a static DOM element, I'm just having trouble understanding how to do that in this situation.

What I'm trying to do is create a dynamic select box .userDrop when .addNew is clicked. After this is done I want the user to select an option #secDrop when selected a change event calls the database and all users from that section are put into .userDrop.

I just cant figure out how to delegate .userDrop.

JS

$("#secDrop").on("change", function() {
  $.ajax({
    type: "POST",
    url: "serverCode/_grabUsers.php",
    data: {
      secID: $("#secDrop").val()
    },
    success: function(data) {

      $(".userDrop").children().remove();

      var users = JSON.parse(data);
      alert(data)
      for (i = 0; i < users["value"].length; i++) {
        $('.userDrop').append($('<option>', {
          value: users["value"][i],
          text: users["text"][i]
        }));
      }
    }
  });
});
}

$(document).on("click", ".addNew", function() {
  var newDiv = "<div class='block'><select class='userDrop'> <
    /select</div > ";

  $(".scheduleColumns").append(newDiv);
});

HTML

<select id='secDrop'>
    <option value='0'>All Sections</option>
    <option value='1'>Section</option>
</select>

<div class='scheduleColumns'>
</div>

<input type='button' class='addNew' value='Add'>

Edit

JS

Edit based on @Barmar

Still can't figure out how to make this work.

var users;

        $(".scheduleColumns").on("change", ".userDrop", function() {
            alert();
            $(this).children().remove();
            for(i = 0; i<users["value"].length; i++){
                $(this).append($('<option>', {
                    value:  users["value"][i],
                    text:   users["text"][i]
                }));
            }
        });

        $("#secDrop").on("change", function(){
            $.ajax({
                type: "POST",
                url: "serverCode/_grabUsers.php",
                data: {secID: $("#secDrop").val()},
                success: function(data){
                    users = JSON.parse(data);
                    $(".userDrop").change();
                }
            });  
        });

Answer 1

Here's my weird way of doing it. If anyone has a better more efficient way of doing this please respond

JS

var users;

            $(".scheduleColumns").on("change", ".userDrop", function() {
                $(this).children().remove();
                for(i = 0; i<users["value"].length; i++){
                    $(this).append($('<option>', {
                        value:  users["value"][i],
                        text:   users["text"][i]
                    }));
                }
            });

            $("#secDrop").on("change", function(){
                $.ajax({
                    type: "POST",
                    url: "serverCode/_grabUsers.php",
                    data: {secID: $("#secDrop").val()},
                    success: function(data){
                        users = JSON.parse(data);
                        $(".scheduleColumns .userDrop").change();   
                    }
                });  
            });

Answer 2

.scheduleColumns is the static element that you delegate from:

$(".scheduleColumns").on("change", ".userDrop", function() {
    ...
});

The code in the function can use $(this) to refer the specific userDrop menu they changed.

Also, class='.userDrop' should be class="='userDrop' when creating the element. The . is used in selectors, not the element itself.