JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0" border="0" id="products_table">
    <tr>
        <th>Product</th><th>Quantity</th>
    </tr>
    <tr>
        <td><select name="order_products[]">
            <option>Bikes</option>
            <option>Cars</option>
            <option>Toys</option>
            <option>And other stuff</option>
        </select></td><td class="tac"><input type="text" name="order_products_quantity[]" value="1" />&nbsp;&nbsp;<b>units</b></td>
    </tr>
</table>

CSS

/* For demo only */
table {}
th {font-weight: bold; text-align: center;}
th,
td {padding: 5px;}

select {width: 150px;}
input {width: 20px;}

JavaScript

create_new_row = function () {
    var table = $('#products_table'),
        last_row = $(table).find('tr:last')
        last_row_select = $(last_row).find('select'),
        new_row = $(last_row).clone();
    
    // This part is brutal, could be optimized, but not a priority
    $(new_row).find('option:selected').removeAttr('selected');
    $(new_row).find('input[type="text"]').val(1);
    $(new_row).appendTo($(table));
};

$('#products_table tr:last select').change(function () {
    create_new_row();
});