Отобразить выпадающее меню в динамическом div

Question

У меня есть адрес div, который содержит 3 элемента: адрес (область текста), город (выпадающий список), местонахождение (выпадающее меню).
У нас есть кнопка + a добавить тот же div ниже существующего, который создается динамически. Теперь в динамическом div, как я могу вызвать значения базы данных в раскрывающемся меню города, а местность зависит от раскрывающегося списка по городу? Работая над этим, я могу создать новый адрес (область текста), но не выпадающий список, так что кто-нибудь может мне помочь здесь?

 <script> 
      $(document).ready(function() { 
var counter = 0; 
$("#addButton").click(function() { 
     if (counter > 100) { 
      alert("Only 100 Address allowed"); 
      return false; 
     } 


    var elems = '<div class="col-lg-5" id="Address' + counter + '">'+ 
      '<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter+1) + '" /></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>' + 
      '<div class="col-lg-3 form-group" id="city' + counter +'"></div><div class="col-lg-3 form-group" id="locality' + counter +'"></div><div class="col-lg-6 col-lg-offset-6"></div>'; 


     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(); 


}); 

});

HTML:

    <button type="button" class="btn btn-default btn-sm" id="addButton"> 
        <span class="glyphicon glyphicon-plus"></span> 
       </button> 
      </div> 
      <div class="col-lg-6 form-group col-lg-offset-6"> 
      </div> 

       <div class="col-lg-6 form-group col-lg-offset-6"> 
      </div> 

      <div class="col-lg-3 form-group"> 
       <select name="city_name" id="city_name" class="form-control" required> 
        <option value="" selected="selected">Select city</option> 
     <?php 
     $sql="select * from city"; 

        $res=mysqli_query($con,$sql); 

        while($row=mysqli_fetch_array($res)) 

      { 

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

       </select> 
      </div> 
      <div class="col-lg-3 form-group"> 
       <select name="locality_name" id="locality_name" class="form-control" required> 
        <option value="" selected="selected" >Select Locality</option> 

     </select> 
     </div> 
     <div class="col-lg-6 col-lg-offset-6"> 
     </div> 


      </div> 

      <div class="col-lg-6 form-group col-lg-offset-6"> 
      </div> 

      <div class="col-lg-5" id='TextBoxesGroup'> 


      </div> 

       <!---Address--> 

Answer 1

$city_name = array(); 
    $city_id = array(); 

    while($row=mysqli_fetch_array($res)) 
    { 
     array_push($city_id,$row[city_id]); 
     array_push($city_name,$row[city_name]); 
    } 

    $count = count($city_id); 

Теперь вы получили CITY_ID и city_name в другом массиве. Теперь проведите через них в javascript.

<script> 

    var city_id = '<?php echo json_encode($city_id); ?>'; 
    var city_name = '<?php echo json_encode($city_id); ?>'; 

    var count = '<?php echo $count; ?>' 

    for(var k=0;k<count;k++){ 

     // Add options here. 
    } 
    </script>