JSFiddle - React, Tailwind, and code Playground

by gubhaju

HTML

<ul id="lang">
    <li><input type="button" value="French" /></li>
    <li><input type="button" value="English" /></li>
    <li><input type="button" value="Spanish" /></li>
    <li><input type="button" value="German" /></li>
</ul>

<ul id="letters">
    <li><input type="button" value="A" /></li>
    <li><input type="button" value="B" /></li>
    <li><input type="button" value="C" /></li>
    <li><input type="button" value="D" /></li>
    <li><input type="button" value="E" /></li>
</ul>

<input id="camouflage" class="camouflage"  value="">

JavaScript

var allowpress=false;
$(document).ready(function() {
    $("#lang input[type=button]").click(function() {
        $("#camouflage").val($(this).val());
        allowpress=true;
    });

    $("#letters input[type=button]").click(function() {
        if(allowpress) {
        $("#camouflage").val( $("#camouflage").val() + ',' + $(this).val());
        allowpress=false;
        }
    });

});