JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<button id="gen_field">Generate Field</button>
<table><tbody id="tbody_coll"></tbody></table>

JavaScript

var index = 0;
$('#gen_field').click(function() {

    var next_row = $('<tr>').attr({
        'id': 'tbl_row' + index
    }).appendTo('#tbody_coll');

    var td1 = $('<td>').attr({
        'id': 'td_collector' + index
    }).appendTo(next_row);
    var td2 = $('<td>').attr({
        'id': 'td_rem' + index
    }).appendTo(next_row);

    var collector = $('<input>').attr({
        'type': 'text',
        'name': 'collector[]'
    }).appendTo(td1).css('width', '200px');
    
    var rem_btn = $("<input>").attr({
        'type': 'button',
        'id': index,
        'name': 'rem',
        'class': 'rem',
        'value': 'del'
    }).appendTo(td2).addClass('span-2');

    console.log(index);
    index++;
});