JSFiddle - React, Tailwind, and code Playground

by S.M. Murad Hasan Tanvir

HTML

<input id='numoftables' type='number'>
<div id='tablescontainer'></div>
<div id="copy">
<table>
    <tr>
        <td>
            <div style='text-align:left;'>
                <h3>
                    <span class='label label-default'>Table #N</span>
                </h3>
            </div>
        </td>
        <td>
            <input id='secondNum' type='number' class='form-control input-md' value='1'>
        </td>
    </tr>
</table>
<div class='table-responsive text-left'>
    <table id='uniqueTable' class='table table-striped condensed'>
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
                <th>Col 6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align='middle'>
                    <b>M</b>
                </td>
                <td>
                    <input type='number' class='form-control input-md'>
                </td>
                <td>
                    <input type='number' class='form-control input-md'>
                </td>
                <td>
                    <input type='number' class='form-control input-md'>
                </td>
                <td>
                    <div class='input-group date' id='fecha'>
                        <input id='fechainput' maxlength='10' data-date-format='DD/MM/YYYY' type='date' class='form-control' placeholder='Fecha DD/MM/AAAA' required>
                        <span class='input-group-addon'>
                            <span class='glyphicon glyphicon-calendar'></span>
                        </span>
                    </div>
                </td>
                <td align='middle'>
                    <img class='delete' src='img/delete.png' >
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

#copy{
  display: none;
}

JavaScript

$(function(){
	$("#numoftables").on("change", function(){
  	$("#tablescontainer").html("");
    var num = $(this).val();
		var table = $("#copy").html();
    for (var i=1; i <= num; i++){
      var newTable = table.replace("secondNum", "id='secondNum"+i).replace("uniqueTable", "uniqueTable"+i);
      $("#tablescontainer").append(newTable);
    }
  });
  //$("#numoftable").change(function(){
    //$("#tablescontainer").html("");
  	//var num = $(this).val();
    //alert();
    //var table = $("#copy").html();
    /*for (var i=1; i <= num; i++){
      var newTable = table.replace("secondNum", "secondNum"+i).replace("table", "table"+i);
      $("#tablescontainer").append(newTable);
    }	*/
  //});
});