This does what you seem to be looking for. You'll want to populate the new rows differently, of course, but it'll get you closer.
Note that I had to add the event listener to the document itself, rather than listening for the selector directly. This is because of the dynamically created elements -- the event listeners defined before they're created don't catch them.
$(document).ready(function() {
/*****
* This function will add a row to the given table directly
* after the row containing the clicked plus button. It will
* clone the first table row each time, then empty it of all
* data, then insert it into the given location.
*****/
$(document).on("click", '.boton_mas', function() {
// Find the first table body row, and clone it.
var datos = $(".tabla_uno tbody tr:first").clone();
// Replace the row number with the newly obtained number.
datos.find("th").empty();
// Stick dummy content into the clone's td's.
datos.find("td").not(".controls").each(function() {
$(this).text($(this).index());
});
// Locate the row that was clicked. We'll add right after this.
var insertHere = $(this).closest("tr");
// And stick the new row in.
datos.insertAfter(insertHere);
// Hide the control buttons...
datos.find(".boton_mas, .boton_menos").hide();
// Now, we need to re-index all the rows headers:
$(".tabla_uno tbody th").each(function(){
// get the index of the row itself, increment it by one
// as indices are zero-based, and change the th text.
$(this).text(parseInt($(this).closest("tr").index()) +1);
})
}) // end .on("click", ".boton_mas")
/****
* This function will remove rows when the minus button has
* been clicked. It will only run when there are more than
* one row, otherwise, it will do nothing.
****/
$(document).on("click", '.boton_menos', function() {
// This if statement will force a minimum of one row.
if($(".tabla_uno tbody tr").length > 1){
// Simply remove the ancestor TR containing this
$(this).closest("tr").remove();
}
}) // end .on("click", ".boton_menos")
// Utility functions to hide and show the add/remove buttons.
// Note that these expect that the css was used to hide them.
$(document).on("mouseenter",".tabla_uno tbody tr", function(){
// Row is hovered, show the buttons.
$(this).find(".boton_mas, .boton_menos").show();
}).on("mouseleave", ".tabla_uno tbody tr", function(){
// Row is no longer hovered, hide them again!
$(this).find(".boton_mas, .boton_menos").hide();
});
})
.boton_mas, .boton_menos {
display: none;
}
tr {
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tabla_uno table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td class="controls">
<button class='boton_mas btn btn-success btn-sm'>+</button>
<button class='boton_menos btn btn-danger btn-sm'>-</button>
</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td class="controls">
<button class='boton_mas btn btn-success btn-sm'>+</button>
<button class='boton_menos btn btn-danger btn-sm'>-</button>
</td>
</tr>
<tr>
<th>3</th>
<td>Larry the Bird</td>
<td> Bird</td>
<td>@twitter</td>
<td class="controls">
<button class='boton_mas btn btn-success btn-sm'>+</button>
<button class='boton_menos btn btn-danger btn-sm'>-</button>
</td>
</tr>
</tbody>
</table>
So, to make the insert work as you'd like (where the new row is added immediately following the clicked row), simply find the TR that contains the clicked element and use datos.insertAfter(insertHere); as you can see in the above code.
So there were two more changes you wanted made, to fit your case. Both pretty trivial, both pretty reasonable. If you look at the end of the '.boton_mas' function, you'll see an .each() loop that reindexes all rows when a row is added. You're absolutely right in your comment, we don't need to sum rows, simply need to reindex the entire thing. Easily done, check the loop.
The other change, to force one or more rows (so NOT allowing the last remaining row to be deleted) is simply done by adding the if statement, as I did in the '.boton-menos' function. That checks first to see if there is more than one row remaining and, if there is, doing the processing of removing the clicked row. Otherwise, the if is bypassed and the row is untouched.
Also, added the third functionality you were looking for, missed the comment regarding hiding/showing the add/remove buttons unless the row was being hovered. You'll see them at the end of the code block, commented as usual.
Hope this helps!
