How do I put data to my second select element via AJAX?

I need help! I have a button where whenever it's clicked, a modal pops out. This is my modal:

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>

As soon as that modal pops out, this AJAX code is called:

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

In my modal. There's a table. one of the td is a select.

WHAT HAPPENS IS THIS:

When you click the ADD A NEW ROW button, it will add a row with a select element on it. BUT the newly-added select element doesn't have any data unlike to the first select element.

THIS IS THE CODE WHEN THE ADD A NEW ROW BUTTON IS CLICKED:

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

Yes, a new row is added, BUT the select element of the newly-added row doesn't have any data. I want to have the same data of my first select element to my newly-added select element.

Can you please help? I know this is a newbie problem.

Thank you,

Carl