JSFiddle - React, Tailwind, and code Playground

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>
</select>

<select name="operands[]" class="operands">
    <option>please select a tag</option>
</select>

<select name="values[]" class="values">
    <option>please select a tag</option>
</select>

    <span class="addButton" onclick="addNew();">+</span>
    <span class="deleteButton" onclick="remove(this)">-</span>
<div class="clear"></div>
</div>

<div class="clonecontainer"></div>

<div class="advancedsearchsubmit"><input id="advancedsearchbutton" type="submit" value="Advanced Search" disabled/></div>
</form>
</div>

CSS

.addButton { color: green; cursor: pointer; }
.deleteButton {color: red; cursor: pointer; }

JavaScript

function remove(element) {
    var amountEntries = $('.dropdown').size() + $('.dropdownclone').size();
    if (amountEntries <= 1) {
        checkDropdowns();
        return;
    }
    if (amountEntries === 2) {
        $('.deleteButton').fadeOut('blind');
        checkDropdowns();
    }
    $(element).closest(".dropdown, .dropdownclone").fadeOut('blind', function() {
        if ($(this).is(".dropdown")) {
            $(".dropdownclone:first").toggleClass("dropdown dropdownclone");
            checkDropdowns();
        }
        $(this).remove();
        checkDropdowns();
    });
    checkDropdowns();
}

function addNew() {
    var dropdownclone, amountEntries = $('.dropdown').size() + $('.dropdownclone').size();

    if (amountEntries === 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.attr("class", 'dropdownclone');
    dropdownclone.hide().appendTo(".clonecontainer").fadeIn('2000');
}

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

function disableSubmitButton() {
     // disable form submission until something is selected...
     $("#advancedsearchbutton").removeClass("advancedsubmit").addClass("disabled");
     $("#advancedsearchbutton").attr("disabled","disabled").val("select a tag ...");
}



var agent = [
"csv",
"drawfile",
"ppt",
"txt",
"wmf"];

var extension = [
"3g2",
"3gp",
"amr",
"asf",
"htc",
"html",
"zip"];

$(document).ready(function() 
{
    $('#advancedsearchbutton').click(function(){
        copy();
        });
    
    $('.deleteButton').hide();
              
    $tags = $("select[class='tags']");
   ...