JSFiddle - React, Tailwind, and code Playground

by polm23

HTML

<a href="#" id="source">Get Source</a>

<a href="#" id="jsonify">Jsonify</a>
<a href="#" id="recon">Reconstitute</a>
<ul id="list">
<li id="item">
    <a href="#" class="and">+</a>
    <a href="#" class="or">|</a>
    <a href="#" class="kill">x</a>
    <select>
        <option value="age">Age</option>
        <option value="specialty">Specialty</option>
    </select>
</li>
</ul>
    
    <textarea id="output"></textarea>

CSS

ul { margin-left: 1em;}

JavaScript

var counter = 0;

var defaultItem = function(){
    counter++;
    return  '<li>' + counter + '.<a href="#" class="and">+</a> <a href="#" class="or">|</a> <a href="#" class="kill">x</a><select><option value="age">Age</option><option value="specialty">Specialty</option></select></li>';
}
    
var optionList = function(selected){
    var choices = ["age","specialty"];
    var output = "";
    for (var i=0;i<choices.length;i++){
        output += '<option ' + (selected === chocies[i] ? 'selected="selected" ' : '') +  'value=' + choices[i] + '>' + choices[i] + '</option>';
    }
    return '<select>' + output + '</select>';
}
    
var addAnd = function(){
    var par = $(this).parent();
    var newChild = $(defaultItem()).addClass('fresh');
    //TODO - need to check if there's already a child list
    if (!$(par).hasClass('parent')) {
        $(par).append('<ul></ul>');        
    } 
    $(par).find('ul').append(newChild);
    doBindings($('.fresh')[0]);
    $('.fresh').removeClass('fresh');
    $(par).addClass('parent');
}
        
var addOr = function(){
    var newChild = $(defaultItem()).addClass('fresh');
    $(this).parent().after(newChild);
    console.log($('li.fresh'));
    doBindings($('.fresh')[0]);
    $('.fresh').removeClass('fresh');
}

var removeCondition = function(){
    $(this).parent().remove();
}   
    
var replaceOptions = function() {
    var par = $(this).parent();
    console.log(par);
    console.log($(par).find('.options'));
    par.children('.options').remove();
    par.children('select').after(showOptions($(this).attr('value')));
    return false;
}
    
var showOptions = function(keyword){
    //This returns html for options
    var option;
    if (keyword === "age") { option = '<input type="text"> </input><input type="text"> </input>'; }
    else if (keyword === "specialty") { option = '<input type="text"></input>'; }

    return '<span class="options">' + option + '</span>';
}
    
var doBindings = function(root,quiet){
       
   ...