JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<div id="advancedsearch" class="advancedsearch">
<form enctype="multipart/form-data" class="advancedsearchform" action="testdocs-db.php" method="post">
<input type="hidden" name="advancedsearchsubmit" value="1"/>
<input type="hidden" name="hiddenfiletype" id="hiddenfiletype" value=""/>
<input type="hidden" name="hiddenfilename" id="hiddenfilename" value=""/>
<input type="hidden" name="hiddenfilesize_min" id="hiddenfilesize_min" value=""/>
<input type="hidden" name="hiddenfilesize_max" id="hiddenfilesize_max" value=""/>
<input type="hidden" name="hiddennumresults" id="hiddennumresults" value=""/>
<input type="hidden" name="hiddenorderby" id="hiddenorderby" value=""/>
<input type="hidden" name="hiddenorderbyad" id="hiddenorderbyad" value=""/>
<input type="hidden" name="hiddenoutputformat" id="hiddenoutputformat" value=""/>
<input type="hidden" name="hiddenoutputlocation" id="hiddenoutputlocation" value=""/>

<p>
<input type="radio" name="andor" value="AND" checked /> match <span class="all">all</span> of these |
match <span class="any">any</span> of these <input type="radio" name="andor" value="OR" />
</p>

<div class="dropdown">
<select name="tags[]" class="tags">
<option value="tags" selected="selected">tags</option>
<option value="agent">agent</option>
<option value="extension">extension</option>
<option value="fileversion">fileversion</option>
<option value="pages">pages</option>
<option value="object">object</option>
<option value="path">path</option>
<option value="variant">variant</option>
<option value="bad">bad</option>
<option value="complex">complex</option>
<option value="encrypted">encrypted</option>
<option value="escherpropname">escherpropname</option>
<option value="escherpropnumber">escherpropnumber</option>
<option value="escherrecordname">escherecordname</option>
<option value="escherrecordnumber">eshcerrecordnumber</option>
<option value="eschershapename">eschershapename</option>
<option...

CSS

.add { color: green; cursor: pointer; }
.delete {color: red; cursor: pointer; }

JavaScript

function countEntries() {
    return $('#advancedsearch div.dropdown, #advancedsearch div.dropdownclone').size();
}

function remove(element) {
    switch (countEntries()) {
        case 0:
        case 1:
            return;
        case 2:
            $('.deleteButton').fadeOut('blind');
    }
    
    $(element).closest(".dropdown, .dropdownclone").fadeOut('blind', function() {
        if ($(this).is(".dropdown")) {
            $(".dropdownclone:first").toggleClass("dropdown dropdownclone");
        }
        $(this).remove();
    });
}

function addNew() {
    var dropdownclone;

    if (countEntries() === 1) {
        $('.deleteButton').show();
    }
    
    dropdownclone = $('.dropdown').clone();
    
    
    dropdownclone.find('select.tags option:selected').removeAttr('selected');
    dropdownclone.find('select.tags option:first').attr('selected','selected');
    dropdownclone.find('select.tags').trigger('change');
    
    dropdownclone.toggleClass('dropdown dropdownclone');
    dropdownclone.hide().appendTo('.clonecontainer').fadeIn(1000);
};

function enableSubmitButton() {
    $("#advancedsearchbutton")
        .removeClass("disabled")
        .addClass("advancedsubmit")
        .attr("disabled", false)
        .val("Advanced Search");
}

var agent = [
"csv",
"drawfile",
"excel",
"flash",
"hangul",
"html",
"image",
"msword",
"ooxml",
"pdf",
"ppt",
"txt",
"wmf"];


$(function() 
{
    var $searchButton = $("#advancedsearchbutton"),
        $valuestextbox = $('<div class="autocomplete"><input type="text" name="values[]" class="valuestextbox"/></div>');
    
    $("#advancedsearchbutton").val("select a tag ...");

    $("select.tags").live("change", function() 
    {
        var $this = $(this),
            val = $this.val(),
            $operands = $this.next("select.operands").empty(),
            $values = $operands.next("select.values").empty(),
            i;
      
        if (val === "agent") 
        {
           ...