JSFiddle - React, Tailwind, and code Playground

by garreh

HTML

<table> <tr><th>field</th><th>comparison</th><th>value</th></tr>   
    <tr>
        <td>
            <select style="width:5em;" class="field">
                <option>name</option>
                <option>age</option>
                <option>sex</option>
            </select>
        </td>
        <td>
            <select style="width:5em;" class = "comp">
                <option>equals</option>
                <option>starts with</option>
                <option>not equal to</option>
            </select>
        </td>
        <td><input type="text" class = 'value'></td>
        <td><button id="add">Add row</button></td>
    </tr>
</table>

JavaScript

$('#tableSearchMainAccount1 tr').each(function() {
    var td = '';
    if ($(this).find("td:first").length > 0) { // used to skip table header (if there is)            
        $(this).find('option:selected').each(function() {
            td = td + $(this).text() + ',';
        });
        td = td + $(this).find('input').val();
        filt[ctr] = td;
        ctr += 1;
    }
});
//alert(filt); //alert output like  name,equals,ann,age,equals,11

$('#add').live('click', function() {
  var $lastTr = $('table tr:last');
    console.log($lastTr);
  $lastTr.clone().insertAfter($lastTr);
  $('#add', $lastTr).replaceWith('<button class="remove_row">Remove row</button>'); // Remove the button from the previous tr, otherwise each row will have it.
});

$('.remove_row').live('click', function() {
    $(this).closest('tr').remove();
});