javascript — событие Bind для динамически добавленных элементов в Jquery не работает

я добавил Address,city а также locality с помощью jQuery в динамически добавленном элементе div, где событие привязки не работает должным образом:
У меня есть ниже код JQuery:

<script type="text/javascript">
$(document).ready(function () {
var counter = 0;
$(document).on('click', '#addButton', function (e) {
if (counter > 19) {
alert("Only 20 Address allowed");
return false;
}
e.preventDefault();

var elems = '<div class="col-lg-5"  id="Address' + counter + '">' +
'<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter + 1) + '"/><div class="col-lg-6 form-group col-lg-offset-6"> </div>' +
'<div class="col-lg-3 form-group" id="city' + counter + '">' +
'<select name="city_name[]" id="city_name' + counter + '" class="form-control"><option value="" selected ="selected">Select City</option></select>' +
'</div><div class="col-lg-3 form-group"><select name="locality_name[]" id="locality_name' + counter + '" class="form-control"><option value="" selected="selected" >Select Locality</option></select></div></div>' +
'<div class="col-lg-1 form-group">' +
'<button type="button" class="removebtn" id="removeButton' + counter + '">' +
'<span class="glyphicon glyphicon-minus"></span></button>' +
'</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>';

//('#addressDiv').append(elems);
$('#addressDiv').append(elems);


$.ajax({
type: "Post",
url: "city_load.php",
success: function (html) {
$('#city_name' + counter).html(html);
}

});


$(document).on('change', '#city_name' + counter, function (ev) {

ev.preventDefault();
$city_id = $(this).val();

$.ajax({
type: "Post",
url: "ajax-dd3ck.php",
data: "city_id=" + $city_id,
cache: "false",
success: function (html) {

$('#locality_name' + counter).html(html);

}

});


});
//counter++;
return false;
});
$(document).on('click', '.removebtn', function () {

if (counter == 0)
{
alert("No more textbox to remove");
return false;
}

counter--;

$("#Address" + counter).remove();
$("#removeButton" + counter).remove();

});

});
</script>

Мой PHP-код для добавления города в выпадающем

city_load.php:

<?php

include("db.php");
$sql = "select * from city";
echo "<select name='city_name[]' id='city' class='city1'><option value='' selected ='selected'>Select City</option>";
$res = mysqli_query($con, $sql);
while ($row = mysqli_fetch_array($res)) {

echo "<option value='$row[city_id]'>$row[city_name]</option>";
}
echo "</select>";
?>

locality_load.php

<?php

include("db.php");
$city_id = $_POST['city_id'];

$sql = "select locality_id,locality_name,city_id from locality where city_id=$city_id";

$res = mysqli_query($con, $sql);
$result = mysqli_query($con, $sql) or die("query error");
while ($rows = mysqli_fetch_array($result)) {



$locality_id = $rows['locality_id'];

$locality_name = $rows['locality_name'];

echo "<option value=" . $locality_id . ">" . $locality_name . "</option>";

//echo '<option value="'.$locality_id.'">'.$locality_name.'</option>';
}
?>

Проблема, которую я получаю, заключается в том, что первый динамический div добавляется и данные загружаются правильно, но для второго динамического div он не работает.
Пожалуйста, посмотрите на скриншот: