I just wanted to add button that will make a new table under the first one (max. 10 times), but the JavaScript code that I implemented don't do that as I want. Below is my HTML & JSS.
function addField(n)
{
var tr = n.parentNode.parentNode.cloneNode(true);
document.getElementById('tbl').appendChild(tr);
}<table id="tbl" class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/> You need to append the copied table to the document body, not back to the table:
function addField(n)
{
var tblClone = n.previousElementSibling.cloneNode(true);
document.body.appendChild(tblClone );
}<table id="tbl" class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/>var count = 1;
function addField(n)
{
if(count<=5){
var table = n.previousElementSibling.children[0].cloneNode(true);
document.getElementById("table-group").appendChild(table);
count++;
}
if(count===5){
document.getElementById('addBtn').style.display='none';
}
}<div id="table-group">
<table class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tr>
</tbody>
</table>
</div>
<input type="button" id="addBtn" class="btn btn-primary" value="+" onclick="addField(this);"/>