JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<input type='text' id='newWallName'>
<input type='text' id='newWallType'>
<select id='x'>
    <option value='0'>--select wall--</option>
    <option value='art' style='background: rgb(192, 255, 187);' data-t='A'>&#187; create artist wall</option>
    <option value='theme' style='background: rgb(187, 255, 247);' data-t='T'>&#187; create theme wall</option>
    <option>hi</option>
    <option>why</option>
    <option>ok</option>
</select>
<br/>
<div id='new-art-wall'>
    <label for='new-awall-input'>create artist wall</label>
    <input type='text' id='new-awall-input' placeholder='new artist wall' />
    <button type='button' id='cancel-new-art-wall'>cancel</button>
    <button type='button' id='add-new-art-wall'>create</button>
</div>
<div id='new-theme-wall'>
    <label for='new-twall-input'>create theme wall</label>
    <input type='text' id='new-twall-input' placeholder='new theme wall' />
    <button type='button' id='cancel-new-theme-wall'>cancel</button>
    <button type='button' id='add-new-theme-wall'>create</button>
</div>
<br/>

CSS

#new-art-wall, #new-theme-wall {
    display:none;
}

JavaScript

$('#add-new-art-wall, #add-new-theme-wall').click(function () {
            addSelect($(this).parent().children('input'));
    });
    $('#cancel-new-art-wall, #cancel-new-theme-wall').click(function () {
        $(this).parent().hide();
    });

    //if ($("#new-awall-input, #new-twall-input").val() !== "") addSelect();

    function addSelect(element) {
        element.parent().hide();
        $("#x").append("<option selected='selected'>" + element.val() + "</option>");
        $("#newWallName").val( element.val() );
        if(element.attr('id') === "new-awall-input") $("#newWallType").val('Artist Wall');
        else if(element.attr('id') === "new-twall-input") $("#newWallType").val('Theme Wall');
        
        $("#x option[value='art']").remove();
        $("#x option[value='theme']").remove();
    }

    $("#x").change(function () {
        if ($(this).val() === "art") {
            $("#new-art-wall").show();
            $("#new-theme-wall").hide();
        } else if ($(this).val() === "theme") {
            $("#new-art-wall").hide();
            $("#new-theme-wall").show();
        }
        alert($(this).attr('data-t'));
    });