JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div>
        <fieldset>
            <legend>Expression Builder</legend>
            <table id="myTable" class="order-list">
                <thead>
                    <tr>
                        <td colspan="2">
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: right;">
                            IF(<input type="text" name="condition1" class="showDialog" />
                            :
                        </td>
                        <td>
                            <input type="text" name="trueValue" class="showDialog" />
                            )
                        </td>
                        <td>
                            <a class="deleteRow"></a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" style="text-align: left;">
                            <input type="button" id="addrow" value="+ Add" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="">
                            ELSE (
                            <input type="text" name="else" id="else" class="showDialog" />)
                        </td>
                    </tr>
                </tfoot>
            </table>
        </fieldset>
        <br />
        <input type="button" id="btnEnviar" value="Send" />
    </div>
    <div id="dialog-form" title="Add New Detail">
        <p>
            All the fields are required.</p>
        <table>
            <tr>
                <td>
                    <label for="condition" id="lblcondition">
                        Condition</label>
                </td>
                <td>
                    <input type="text" name="condition" id="condition" class="text ui-widget-content ui-corner-all" />
                </td>
        ...

CSS

.selectedRow
        {
            outline: thin solid black;
        }
#dialog-form {
    display: none;
}

JavaScript

var counter = 0;
            $("button, input:submit, input:button").button();
            $('input:text').addClass("ui-widget ui-state-default ui-corner-all");
            var NewDialog = $("#dialog-form");
            NewDialog.dialog({ autoOpen: false });
            var Ventana = $("#dialog-form");
            $("#addrow").on("click", function () {

                var counter = $('#myTable tr').length - 2;

                $("#ibtnDel").on("click", function () {
                    counter = -1
                });

                var newRow = $("<tr>");
                var cols = "";

                cols += '<td>ELSE IF(<input type="text" name="condition' + counter + '" class="showDialog1" /> </td>';
                cols += '<td>: <input type="text" name="TrueValue' + counter + '" class="showDialog1" />)</td>';

                cols += '<td><input type="button" id="ibtnDel"  value="-Remove"></td>';
                newRow.append(cols);
                var txtCondi = newRow.find('input[name^="condition"]');
                var txtVarlorV = newRow.find('input[name^="TrueValue"]');
                newRow.find('input[class ="showDialog1"]').on("click", function () {

                    //Seleccionar la fila
                    $(this).closest("tr").siblings().removeClass("selectedRow");
                    $(this).parents("tr").toggleClass("selectedRow", this.clicked);

                    Ventana.dialog({
                        autoOpen: true,
                        modal: true,
                        height: 400,
                        width: 400,
                        title: "Builder",
                        buttons: {
                            "Add": function () {
                                txtCondi.val($("#condition").val());
                                txtVarlorV.val($("#returnValue").val());
                                $("#condition").val("");
                                $("#returnValue").val("");
                              ...