jQuery dynamic functions with variable params

Question

I'm trying to make a little program that uses generated (dynamically) tables, I will explain an example:

I have a blank page with only and input (number type) and a div:

<input id='numoftables' type='number'>
<div id='tablescontainer'></div>

I need create N tables with the following structure:

<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='tableN' 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>
<hr>

It's generate something similar of this (with setting a value of 3 on input with id 'numoftables'):

But I want to make dynamic elements (with dynamic id's), please see this:

Red boxes will have the dynamic number, 1 to N; N is the value of the input with id 'numoftables'.

Green boxes represents the numbers of rows (I call this number, M) of the tableN.

How can I to generate all of this dynamically :(?

I have a crazy code, like this:

$("#tablescontainer").html(null);
for (i=1;i<=$("#numoftable").val();i++)
{
    $("#tablescontainer").append("<table><tr><td><div style='text-align:left;'><h3><span class='label label-default'>Table #N</span></h3></div></td><td style='position:relative;top:7px !important;left:8px;'><input id='secondNum' type='number' style='width:64px;' class='form-control input-md' value='1'></td></tr></table><div class='table-responsive text-left'><table id='tableN' 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 width='20' class='delete' src='img/delete.png' ></td></tr></tbody></table></div><hr><script>$('#numcarr"+i+"').click(function(e){$('#tabla"+i+" > tbody:last').html(null);for (j=1;j<=$(\"#numcarr"+i+"\").val();j++){$('#tabla"+i+" > tbody:last').append('<tr><td align=\"middle\"><b>"+i+"</b></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" 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 width=\"20\" class=\"delete\" onclick=\"$(this).parent().parent().remove()\" src=\"img/delete.png\"></td></tr>')}});</script>");
}

I don't know how can I solve this, write less code, make it dynamically :c Thanks!

Answer 1

see the result in by inspect the table and secondNum: jsfiddle

jQuery

$(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);
    }
  });
});

CSS

#copy{
  display: none;
}

Now you have to do other things in the similar fashion, like showing the the table number. use a different id which may not use in the content and replace it in the jquery.