JSFiddle - React, Tailwind, and code Playground

by maxisam

HTML

<div id="queryFields">
            <select name="condition">
                <option value="AND">AND</option>
                <option value="OR">OR</option>
            </select>
            <input type="text" name="fieldname" id="fieldName" size="20" />
            <select  name="operator">
                <option id="opt1" value="CONTAINS">Contains</option>
                <option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option>
                <option id="opt3" value='LIKE'>Like</option>
                <option id="opt4" value='BETWEEN'>Between</option>
            </select>
            <input type="text" name="fieldValue1" id="fieldvalue1" value="" size="20" />
            <input type="button" id="add" value="Add" /> 
        </div>

JavaScript

$(document).ready(function() {
    var index = 0;
    $('#add').click(function() {
        InsertFields();
    });

    function InsertFields() {
        index++;
        $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator' class='newOperator'><option id='opt1' value='contains'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' class='newAdd' value='Add' /> <input type='button' class='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
    }
    //used live on the second buttons to rebind the function once the element was added.
    $('.newAdd').live('click', function() {
        index++;
        $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select class='newOperator' name='operator'><option id='opt1' value='contains'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' class='newAdd' value='Add' /> <input type='button' class='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
    });

    $('.btnRemove').live('click', function() {
        $(this).parent().remove();
    });
    //first select if performed on first row works fine
    $('select[name=operator]').change(function() {
        var foo = $('select[name=operator] option:selected').val();
       ...