How do I retrieve values from table rows dynamically created by JavaScript with Laravel?

I am attempting to create a web page where the user has options to select from items pulled from my database. I have already gotten the values from my database, and have displayed the items on screen with an add button appended to each item. I am using session variables which store my array items for my JavaScript function to interact with when creating the new list.

Here is a snippet of the html code that displays the user option selection:

<?php
    //product_name, $product_quantity are array variables created from database items
    //and passed from my controller to this view.
    $_SESSION['temp_products'] = $product_name;
    $_SESSION['temp_quantities'] = $product_quantity;
?>

<h2>Purchase Order</h2>
<div class = "row">
    <div class ="column">

            <table id = "data_table">
                <tr>
                    <th align = "left"><h3>Items</h3></th>
                    <th align = "right"><h3>Quantity</h3></th>
                </tr>
                @for($i = 0; $i < count($product_name); $i++)
                    <tr id = <?php echo("row".$i."")?>>
                        <td align="left"><input type="text" id=<?php echo("product".$i) ?> value={{$_SESSION['temp_products'][$i]}} readonly></td>
                        <td align="right"><input type="text"  id=<?php echo("quantity".$i) ?> value={{$_SESSION['temp_quantities'][$i]}} readonly></td>
                        <td><input type="button" value="Add" class="add" onclick= <?php echo('"add_product('.$i.')"') ?>></td>
                    </tr>
                @endfor
            </table>
    </div>

And my JavaScript add_product function that executes each time the user presses the "Add" button:

<script type="text/javascript">
    function add_product(index){
        //Accepting values clicked into variables
        var name = document.getElementById("product"+index).value;
        var quantity = document.getElementById("quantity"+index).value;

        //Assigning selected item to new list
        var table = document.getElementById("data_table1");
        var table_length = (table.rows.length);
        var row = table.insertRow(table_length).outerHTML= "<tr id = 'row"+table_length+"'><td ><input type= 'text' id = 'list"+table_length+"' name = 'product_ordered["+table_length+"]' value = '"+name+"' readonly></td><td><input type = 'number' name = 'quantity_ordered["+table_length+"]' id = 'order_quantity"+table_length+"' min = '1'></td><td><input type = 'button' id='remove_btn"+table_length+"' value = 'Remove' class = 'remove' onclick = 'remove_product("+table_length+")'></td></tr>"; 

        //removing selection choice
        document.getElementById("row"+index).outerHTML ="";
    }
</script>

My issue seems to be in retrieving the dynamically created rows. I tried putting static entries in the list:

<div class = "column">
        <table id = "data_table1">
            <form action = "purchase_order/save_order/{{$purchase_order->purchase_order_id}}" method = "post">
                <tr>
                    <th align = "left"><h3>Ordered</h3></th>
                    <th align = "right"><h3>Quantity Ordered</h3></th>
                </tr>

                <tr id = 'row1'><td ><input type= 'text' id = 'list1' name = 'product_ordered[1]' value = 'Product 1' readonly></td>
                    <td><input type = 'number' name = 'quantity_ordered[1]' id = 'order_quantity1' min = '1'></td>
                    <td><input type = 'button' id='remove_btn1' value = 'Remove' class = 'remove' onclick = 'remove_product('1')'></td>
                </tr>
                <tr id = 'row2'><td ><input type= 'text' id = 'list2' name = 'product_ordered[2]' value = 'Product 2' readonly></td>
                    <td><input type = 'number' name = 'quantity_ordered[2]' id = 'order_quantity2' min = '1'></td>
                    <td><input type = 'button' id='remove_btn2' value = 'Remove' class = 'remove' onclick = 'remove_product('2')'></td>
                </tr>

            </table>
            <input type = "hidden" name = "_token" value="{{ csrf_token() }}">
            <input type = "submit" value = "Submit">
        </form>

Retrieving these values and displaying them work fine. But when the user adds a product from the first table to the other, populating the second array created, it fails to receive the items.

I would appreciate any help, thank you.