Dynamically add

I'm using Laravel 5.7 with laravelcollective/html for my forms.

I'm trying to create a page where the user can create an order and add products to it. The user has to be able to press a button with a + sign to add more products.

The regular number input for the quantity is easy, I can just append it using jQuery like this:

$(function() {
  $('#addMoreProducts').click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<div class='col-sm-6'>");
    $("#fieldList").append("<div class='form-group'>");
    $("#fieldList").append("<label for='quantity[]'>Quantity</label>");
    $("#fieldList").append("<input class='form-control' placeholder='Quantity' name='quantity[]' type='number'>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
  });
});

But I can not figure out how to add <select> inputs dynamically with the records from the database. These are the fields that I need to "duplicate".

<div class="row" id="fieldList">
  <div class="col-sm-6">
    <div class="form-group">
      
      
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group">
      
      
    </div>
  </div>
</div>

<div class="form-group">
  <a id="addMoreProducts" class="btn btn-block btn-default">+</a>
</div>

Product info is passed in through the controller.

I've tried appending the <select> inputs as well and they display but ofcourse the options aren't in there.

$(function() {
  $('#addMoreProducts').click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<div class='row' id='fieldlist'>");
    $("#fieldList").append("<div class='col-sm-6'>");
    $("#fieldList").append("<div class='form-group'>");
    $("#fieldList").append("<label for='product_id[]'>Product</label>");
    $("#fieldList").append("<select id='select2' class='form-control select2' name='product_id[]'><option selected='selected' value=''>Product</option></select>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("<div class='col-sm-6'>");
    $("#fieldList").append("<div class='form-group'>");
    $("#fieldList").append("<label for='quantity[]'>Quantity</label>");
    $("#fieldList").append("<input class='form-control' placeholder='Quantity' name='quantity[]' type='number'>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
  });
});

How do I add additional <select> inputs while keeping it populated by the rows in my database?

Not familiar with AJAX, but is this a scenario that I need it for? Any suggestions are greatly appreciated.

EDIT: This is the products table:

id|name|description|product_category_id|supplier_id|sales_price|buy_price|instock|discontinued

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->mediumText('description');
        $table->integer('product_category_id')->unsigned();
        $table->integer('supplier_id')->unsigned();
        $table->decimal('sales_price', 8, 2);
        $table->decimal('buy_price', 8, 2);
        $table->boolean('instock');
        $table->boolean('discontinued');

        $table->foreign('product_category_id')->references('id')->on('product_categories')->onDelete('cascade');
        $table->foreign('supplier_id')->references('id')->on('suppliers')->onDelete('cascade');

        $table->timestamps();
    });
}

Example of what the generated <select> should look like:

<select id="select2" class="form-control select2" name="product_id[]">
  <option selected="selected" value="">Product</option>
  <option value="1">Windows 10 License</option>
  <!-- etc... -->
</select>

from Dynamically add