JSFiddle - React, Tailwind, and code Playground

by r4ffel

HTML

<form name="order" action="order_stuff.php" method="post">
    <table id="myTable">
        <thead>
            <tr>
                <th></th>
                <th>Group</th>
                <th>Item</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="count">1</td>
                <td>
                    <select name="group" class="ctlGroup">
                        <option value="dimensioner">Dimensioner</option>
                        <option value="scanner">Scanner</option>
                        <option value="scale">Scale</option>
                        <option value="camera">Cameras</option>
                        <option value="computer">Computer</option>
                        <option value="network">Network</option>
                        <option value="cables">Cables</option>
                        <option value="Other">Other</option>
                    </select>
                </td>
                <td>
                    <select name="item" class="ctlItem"> 
                        <option value=""></option>
                    </select>
                </td>
                <td>
                    <input type="text" name="quantity1" value="" />
                </td>
                <td>
                    <input type="button" value="X" class="removeVar"/>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <input type="button" id="addVar" value="Add Item"/>
                </td>
                <td colspan="2">
                </td>
                <td>
                    <input type="submit" name="submit" value="Place Order"/>
                </td>                
            </tr>
        </tfoot>
    </table>
</form>

JavaScript

$('form').on('click', '.removeVar', function(){
    $(this).closest('tr').remove();
    $('.count').each(function(i){
      $(this).text(i + 1);
    });
});

//add a new node
$('#addVar').on('click', function(){
    var varCount = $('#myTable tr').length - 1;
    $node = ['<tr>',
    '<td class="count">'+varCount+'</td>',
    '<td><select name="group" class="ctlGroup">',
      '<option value="dimensioner">Dimensioner</option>',
      '<option value="scanner">Scanner</option>',
      '<option value="scale">Scale</option>',
      '<option value="camera">Cameras</option>',
      '<option value="computer">Computer</option>',
      '<option value="network">Network</option>',
      '<option value="cables">Cables</option>',
      '<option value="Other">Other</option>',
    '</select></td>',
    '<td><select name="item" class="ctlItem">',
      '<option value=""></option>',
    '</select></td>',
    '<td><input type="text" name="quantity" value=""/></td>',
    '<td><input type="button" value="X" class="removeVar"/>',
    '</td></tr>'].join('\n');
    $('#myTable > tbody:last').append($node);
});

$("#myTable").on('change', ".ctlGroup", function(){
    var row = $(this).closest('tr');
    $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'},function(j){
        
        var options = '';
        
        for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
        }
    
        row.find(".ctlItem").html(options);
    });
});