JSFiddle - React, Tailwind, and code Playground

by Mish Pie

HTML

how many form:
<input type='text' id='count' />
<input type=button id=gen_form value='generate form' />
<div id='form_instance'>
    <form id='form1'>
         <h3>input_param</h3>

        <table id='t_form1/t1'>
            <tr>
                <td>first col:
                    <input type='text' name='form1/t1/1' />
                </td>
                <td>2nd col:
                    <input type='text' name='form1/t1/2' />
                </td>
            </tr>
        </table>
        <input type='button' class='btn_clone' id='b_form1/t1' value='clone' />
        
<h3>output_param</h3>

        <table id='t_form1/t2'>
            <tr>
                <td>first col:
                    <input type='text' name='form1/t2/1' />
                </td>
                <td>2nd col:
                    <input type='text' name='form1/t2/2' />
                </td>
            </tr>
        </table>
        <input type='button' class='btn_clone' id='b_form1/t2' value='clone' />
        <hr />
    </form>
</div>

JavaScript

//latest
$('#form1').css('display', 'none');
$('#gen_form').click(function () {
    var count = $('#count').val();
    //user input how many form(operators) to generate
    for (var i = 1; i <= count; i++) {
        var cloned = $('#form1').clone();
        cloned.appendTo('#form_instance')
            .attr('id', 'new_form' + (i))
            .css('display', 'block');
        //change the name and id of each input field under the generated form
        cloned.find('*[name]').each(function () {
            var new_name = $(this).attr("name").slice(0, 4) + i + $(this).attr("name").slice(5);
            this.name = new_name;
            this.id = new_name;
        });
        //change the button name so I can get the button id to match the table id to clone new input row.
        cloned.find(':button').each(function () {
            var new_id = $(this).attr("id").slice(0, 6) + i + $(this).attr("id").slice(7);
            this.id = new_id;
            console.log('buttn: '+new_id);
        });

        //find table and change the id 
        cloned.find('table').each(function () {
            var new_id = $(this).attr("id").slice(0,6) + i + $(this).attr("id").slice(7);
            this.id = new_id;
            console.log('table: '+new_id);
            
        });
    }
});
//this part i am still working on.
$('#form_instance').on('click', '.btn_clone', function () {
    var b_id = $(this).attr('id');
    console.log(b_id);    
    var t_id = 't' + b_id.
    
});