JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<div id="advancedsearch" class="advancedsearch">
<form class="advancedsearchform">

<p>
<input type="radio" name="cat" value="and" checked /> match <span class="all">all</span> of these | 
match <span class="any">any</span> of these <input type="radio" name="cat" 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 value="eschershapenumber">eschershapenumber</option>
<option value="mswordpicturetype">mswordpicturetype</option>
<option value="functionuse">functionuse</option>
<option value="objects">objects</option>
<option value="heightpixels">heightpixels</option>
<option value="widthpixels">widthpixels</option>
<option value="maxrecordsize">maxrecordsize</option>
<option value="encoding">encoding</option>
<option value="dpi">dpi</option>
<option value="depth">depth</option>
<option value="mask">mask</option>
<option value="progressive">progressive</option>
<option value="colour">colour</option>
</select>
 
<select name="operands[]" class="operands">
    <option>operands</option>
  </select>
  
<select name="values[]" class="values">
    <option>values</option>
  </select>
  

<img alt="add" src="images/add1.png" onclick="addNew();" onmouseover="this.src='images/add.png'"...

JavaScript

function addNew() {
    var dropdownclone = $('.dropdown').clone();
    dropdownclone.attr("class",'dropdownclone');
    dropdownclone.hide().appendTo(".clonecontainer").fadeIn(1000);
    };

$(document).ready(function() 
{
$tags = $("select[class='tags']");

$tags.live("change",function() 
{
    $operands = $(this).next("select[class='operands']");
    $values = $operands.next("select[class='values']");
    $operands.empty();
    $values.empty();

    if ($(this).val() == "agent") 
{

$(this).next("select[name='operands'] option").remove();
$("<option>=</option>").appendTo($operands);
$("<option>!=</option>").appendTo($operands);

$(this).next("select[name='values'] option").remove();
$("<option>excel</option>").appendTo($values);
$("<option>msword</option>").appendTo($values);
$("<option>ppt</option>").appendTo($values);
$("<option>pdf</option>").appendTo($values);
$("<option>image</option>").appendTo($values);
$("<option>txt</option>").appendTo($values);
$("<option>html</option>").appendTo($values);
$("<option>csv</option>").appendTo($values);
$("<option>ooxml</option>").appendTo($values);
$("<option>flash</option>").appendTo($values);
$("<option>wmf</option>").appendTo($values);
}

if ($(this).val() == "extension") 
{
$(this).next("select[name='operands'] option").remove();
$("<option>=</option>").appendTo($operands);
$("<option>!=</option>").appendTo($operands);

$(this).next("select[name='values']...