Show items in jQuery, using internal loop

Question

I got the following jQuery:

$(".quantidade_lotes").change(function() {
    var quantidade_linhas = $("#quantidade_linhas").val();
    var quantidade_lotes = $(".quantidade_lotes").val();
    var quantidade_dividida = (quantidade_linhas/quantidade_lotes);
    var quantidade_dividida_acima = Math.ceil(quantidade_dividida);
});

In this, quantity_lines is = 17, quantity_lots = 5, quantity_divided = 3.4, quantity_divided quantity_above is equal to 4. So far, everything OK and correct.

The case is, I need to make a Loop, where I then put 4 items inside the HTML. I tried it this way:

for (var i = 0; i <= quantidade_dividida_acima; i++) {
    $(".lotes_lista").html("<h1>Título</h1>"+i);
}

However, it does not display the 4, for example, it inserts only one. How can I adjust this?

In this case, I select in how many lots I will divide this sending of sms, then when I select, it will bring to me all the divisions, as the layout..

This is the code that jQuery should include, for each batch, being divided according to the selection.

<table class="table">
    <thead>
        <tr>
            <th> Lote </th>
            <th> Qtde </th>
            <th class="text-right"><span > Data</span> </th>
            <th>inicial</th>
            <th class="text-right">Data</th>
            <th>Final </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><span class="widget-thumb-body-stat label label-danger btn-circle" data-counter="counterup" data-value="1">1</span>
            </td>
            <td> <span class="widget-thumb-body-stat label label-danger btn-circle" data-counter="counterup" data-value="1080">1080</span>
            </td> 
            </td>
            <td>
                <div class="input-group date date-picker" data-date-format="dd-mm-yyyy" data-date-start-date="+0d">
                    <input type="text" class="form-control" readonly>

                    <span class="input-group-btn">
                        <button class="btn default" type="button">
                            <i class="fa fa-calendar"></i>
                        </button>

                    </span>
                </div>
            </td>

            <td> 
                <div class="form-group">
                    <div class="input-group">
                            <input type="text" class="form-control timepicker timepicker-24">
                        <span class="input-group-btn">
                            <button class="btn default" type="button">
                                <i class="fa fa-clock-o"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </td>
            <td><b>-</b>
            </td>
            <td>
                <div class="input-group date date-picker" data-date-format="dd-mm-yyyy" data-date-start-date="+0d">
                    <input type="text" class="form-control" readonly>
                    <span class="input-group-btn">
                        <button class="btn default" type="button">
                            <i class="fa fa-calendar"></i>
                        </button>
                    </span>
                </div>
            </td>
            <td> 
                <div class="form-group">
                    <div class="input-group">
                            <input type="text" class="form-control timepicker timepicker-24">
                        <span class="input-group-btn">
                            <button class="btn default" type="button">
                                <i class="fa fa-clock-o"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </td>                                                       
        </tr>
    </tbody>
</table>

Answer 1

The problem is that you need to store the values in an array, and each time you do the calculation you are overwriting the value into a single variable, try this:

var quantidade_dividida_acima = [];

$(".quantidade_lotes").change(function() {
    var quantidade_linhas = $("#quantidade_linhas").val();
    var quantidade_lotes = $(".quantidade_lotes").val();
    var quantidade_dividida = (quantidade_linhas/quantidade_lotes);
    var quantidade_dividida_acima.push(Math.ceil(quantidade_dividida));
});
//Como o código não possui mais detalhes, 
//penso que talvez este trecho entre em algum outro evento seu
$.each( quantidade_dividida_acima, function( key, value ) {
    $(".lotes_lista:nth-child("+key+")").html("<h1>Título</h1>"+value);
}

Answer 2

I recommend that you read the documentation and understand the functions, what you are doing is meaningless:

for (var i = 0; i <= quantidade_dividida_acima; i++) {
    $(".lotes_lista").html("<h1>Título</h1>"+i);
}

The html method does not put data, it overwrites everything, it will never work, the correct would be something similar to this:

var dados = "";

for (var i = 0; i <= quantidade_dividida_acima; i++) {
    dados += "<h1>Título</h1>"+i; //Adiciona um item a string
}

$(".lotes_lista").html("<h1>Título</h1>"+i);