Как поместить данные во второй элемент выбора через AJAX?

Question

Мне нужна помощь! У меня есть кнопка, где всякий раз, когда на нее нажимают, появляется модал. Это мой модал:

modal_newDelivery. php

<div class="modal fade" id="modal_new_delivery" tabindex="-1" role="dialog" aria-labelledby="newProductFormLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newProductFormLabel">New Delivery</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="container">
            <div class="form-group row">
              <div class="col-6">
              <label for="txt_drnumber">DR#</label>
              <input class="form-control" type="text" id="txt_drnumber">
              </div>
            </div>
            <div class="form-group row">
              <div class="col-6">
              <label for="txt_supplier">Supplier</label>
              <input class="form-control" type="text" id="txt_supplier">
              </div>
            </div>
            <table class="table table-bordered" id="table_new_delivery">
              <thead>
                <tr>
                  <th>ITEM</th>
                  <th colspan="2">QTY(pcs)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><select class="form-control" id="select_products"></select></td>
                  <td><input type="text" class="form-control" id="txt_qty" onkeypress="return isNumberKey(event)"></td>
                  <td><button type="button" class="btn btn-danger remove" class="removerow">-</button></td>
                </tr>
              </tbody>
            </table> 
            <br>
            <button type="button" class="btn btn-info" style="width:100%;" onclick="newrow()">ADD A NEW ROW</button>
          </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" onclick="clear()">Clear</button>
        <button type="button" class="btn btn-primary" onclick="">Save</button>
      </div>
    </div>
  </div>
</div>

Как только этот модал появляется, этот код AJAX называется:

function loadselectproducts(){
        $.ajax({
            url: 'ajax.php',
            method: 'POST',
            data: {
                key: 'inventory_delivery_loadproducts'
            },success: function(response){
                $('#select_products').html(response);
            },error: function(xhr,ajaxOptions,thrownError){
                console.log(xhr);
            }
        });
    }

По моему модал. Там есть стол. один из тд является выбором.

ЧТО ЭТО ПРОИСХОДИТ:

Когда вы нажмете кнопку «ДОБАВИТЬ НОВУЮ СТРОКУ», она добавит строку с выбранным элементом. НО только что добавленный элемент выбора не имеет никаких данных в отличие от первого элемента выбора.

ЭТО КОД, КОГДА ДОБАВЛЯЕТСЯ НОВАЯ КНОПКА СТРОКИ:

var row = '<tr><td><select class="form-control" id="select_products"></select></td><td><input type="text" class="form-control" id="txt_qty" onkeypress="return isNumberKey(event)"></td><td><button type="button" class="btn btn-danger remove" class="removerow">-</button></td></tr>';

    function newrow(){
        $('#table_new_delivery tbody').append(row);
        console.log(row);
        loadselectproducts();
    } 

Да , добавлена ​​новая строка, НО элемент select новой добавленной строки не имеет никаких данных. Я хочу, чтобы данные моего первого элемента select были такими же, как и у моего недавно добавленного элемента select.

Не могли бы вы помочь? Я знаю, что это новая проблема ie.

Спасибо,

Карл