JSFiddle - React, Tailwind, and code Playground

by Randy Crews

HTML

<div id="queryFields">
                    <a href="#" title="Click to add  criteria" id="add"><span class="advButtons">Add Criteria</span></a>
                    <a href="#" title="Click to build query" id="bldQuery"><span class="advButtons">Generate
                        Query</span></a>
                    <hr />
                    <div id="resulttxt">
                    </div>
                    <input type="text" class="queryterm" name="fieldValue1" id="fieldvalue1" value=""
                        size="110" />
                </div>

<div id="testresult"/>

JavaScript

//Advanced Query Builder Code
$('#add').click(function() {
    $("<div class='additionalrow'><select class='queryterm' name='condition'><option  value='AND'>AND</option><option value='OR'>OR</option></select>&nbsp;&nbsp;" + "<select class='queryterm' name='condition'>" + "<option  value='address:'>Address</option>" + "<option  value='age:'>Age</option>" + "<option  value='dateofbirth:'>Date Born</option>" + "<option  value='description:'>Description</option>" + "<option  value='driverslicensenumber:'>Driver's License Number</option>" + "<option  value='eyecolortext:'>Eye Color</option>" + "<option  value='facialhair1text:'>Facial Hair</option>" + "<option  value='floor:'>Floor</option>" + "<option  value='haircolor1text:'>Hair Color</option>" + "<option  value='hairlenghttext:'>Hair Length</option>" + "<option  value='hairstyletext:'>Hair Style</option>" + "<option  value='height:'>Height</option>" + "<option  value='weight:'>Weight</option>" + "<option  value='zip:'>Zip</option>" + "</select>&nbsp;&nbsp;<select name='operator'class='operClass'><option id='opt1'>Equals</option><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>&nbsp;&nbsp;<input type='text' class='queryterm' name='fieldValue1' id='fieldvalue1' value='' size='25' />&nbsp;&nbsp;<a href='#' id='btnRemove'><span class='advButtons'>Remove</span></a></div>").appendTo('#queryFields');
});

//remove row
$('#btnRemove').live('click', function() {
    $(this).parent().remove();
});

//select operator from primary row to determine if extra field is needed in ui
$('.operClass').change(function() {
    var slct = $(this, '.operClass option:selected').val();
    var itm = $(this, '.operClass');
    //get count of text input fields for current selection
    var $selector = $(this);
    var cnt = $selector.siblings('input:text').length;
   ...