JSFiddle - React, Tailwind, and code Playground

by Daniel

HTML

<input type="checkbox" class="allowM" /> Allow the modification of standardized_data table.
        <button id="button" >+</button>
        <div id="query_mod">
            <pre>
            <span style="color:blue;">update</span>
                                company_data.standardized_data
            <span style="color:blue;">set</span>
                        <input type="text" id="set_a"/> = <input type="text" id="set_b"/>
            <span style="color:blue;">where</span>
                        <input type="text" id="where_a"/> = <input type="text" id="where_b"/>;
            </pre>
            
        </div>

JavaScript

$(function () {
     
                                $('.allowM').change(function () {                
                                   $('#query_mod').toggle(this.checked);
                                   $('#button').toggle(this.checked);
                                }).change(); 
     
     $('#button').click(function() {
                        var clone = original.cloneNode(true); // "deep" clone
                        clone.id = "query_mod" + ++i; // there can only be one element with an ID
                        
                        original.parentNode.appendChild(clone);
     });
                           
                     });
                     
                     var i = 0;
                     var original = document.getElementById('query_mod');