Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have a blade in laravel:
Bank
<div class="form-group row">
<label for="batterybrand" class="col-sm-2 col-form-label">Battery Brand</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="batterybrand[]" name="batterybrand[]" required>
</div>
</div>
</td>
</tr>
<tr>
<td align="center" width="5%"><h5><b>No</b></h5></td>
<td align="center" width="45%"><h5><b>Voltage</b></h5></td>
<td align="center" width="50%"><h5><b>Keterangan</b></h5></td>
</tr>
<tbody id="tbody-maintenance-battery">
<tr class="table-maintenance-battery-row" data-idmaintenancedetail="1">
<td>
</td>
<td>
<div class="form-group row">
<div class="col-sm-10">
<input type="text" size="45" class="form-control" id="voltage[]" name="voltage[]" required>
</div>
<div class="action_container">
<button class="bg-primary" onclick="fungsitambahrowvoltase()">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td rowspan="1">
<p>
<div class="form-group row">
<label for="kapasitas" class="col-sm-3 col-form-label">Kapasitas</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="kapasitas[]" name="kapasitas[]" required>
</div>
</div>
<div class="form-group row">
<label for="tanggalpasang" class="col-sm-3 col-form-label">Tanggal Pasang</label>
<div class="col-sm-6">
<input type="datetime-local" class="form-control" id="tanggalpasang[]" name="tanggalpasang[]" value="{{ date('Y-m-d\TH:i') }}" required>
</div>
</div>
</td>
</tr>
</tbody>
<tr height="20px">
<td colspan="3" align="right">
<button class="bg-danger" onclick="fungsihapusbattery()">
<i class="fa fa-minus">Hapus Batere</i>
</button>
</td>
</tr>
</table>
<p>
<p>
<button class="bg-primary" onclick="fungsitambahbattery()">
<i class="fa fa-plus">Tambah Batere</i>
</button>
The 'Tambah Batere' button will duplicate the table above it. However, it will generate a table with an incremented id, for example, when I click the button, the id of the new table will be 'table-maintenance-battery-1'. Now I have 2 tables with different ids:
Then, please take a look at the button inside the table:
That will execute the following function: function fungsitambahrowvoltase() { var table = document.getElementById("table-maintenance-battery"); var row = table.insertRow(table.rows.length-2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2);
cell1.innerHTML = "";
cell2.innerHTML =
"<p>"+
"<div class='form-group row'>" +
"<div class='col-sm-10'><input type='text' size='45' class='form-control' id='voltage-" + tableIndex + "[]' name='voltage-" + tableIndex + "[]' required></div>" +
"<div class='action_container'><button class='bg-danger' onclick='fungsihapusrowvoltase()'><i class='fa fa-minus'></i></button></div>" +
"</div>";
}
It will be create a new row in table. The issue is that when I click the button in the table with id 'table-maintenance-battery-1', it adds a new row to the table with id 'table-maintenance-battery' instead. I want the new row to be added to the table corresponding to the button I clicked. How? Pleaseee
The problem is that in both functions you retrieve the same table id.
document.getElementById("table-maintenance-battery");
To use the same function for both tables, you should pass the table id as a parameter of the function.
onclick="fungsihapusrowvoltase('table-maintenance-battery-1')";
...
function fungsitambahrowvoltase(tableId) {
...
document.getElementById(tableId);
...
}
@vincent15000 Okay, but if I add new table with click button, it will create auto table and with id table-maintenance-battery-2. And I have 3 table. How button in the table 3 works?
@dityaardi Do so:
<button class="bg-primary" onclick="fungsitambahrowvoltase(this)">
<i class="fa fa-plus"></i>
</button>
function fungsitambahrowvoltase(el)
{
var table = el.parentNode.closest("table");
//...
}
@Pippo Thank You Very Much. It works. In innerHTML after create new row, that have button fungsihapusrowvoltase(). This function is:
function fungsihapusrowvoltase() { var table = document.getElementById("table-maintenance-battery"); table.deleteRow(table.rows.length - 3); }
This function not work, row not be delete. How?
@dityaardi This seems to be a new question ;-)
it is not very clear which row you want to delete...
Anyway, use the previous pattern to reference the button-related table ( onclick="fungsihapusrowvoltase(this) then function fungsihapusrowvoltase(el) {var table = el.parentNode.closest("table") //... )
Then, to delete last row you can use table.deleteRow(- 1).
Another way is your method, so: table.deleteRow(table.rows.length - 1) delete the last row, table.deleteRow(table.rows.length - 2) delete the penultimate row and so on...
Please or to participate in this conversation.