Separate function for buttons created dynamically - php

Question

I print this buttons with php taking info from the BBDD:
print "
<div class='col-sm-6 col-md-6 col-lg-3 col-xl-3 cartasdos'>
<figure><img class='imagenEditar' height='190px' width='100%' src='../img/relatos/".$fila['imagen']."'></figure>
<h3>".$fila['titulo']."</h3>
<h5>".$fila['autor']."</h5>
<h6 class='resumen'> ".$fila['sinopsis']." </h6>
<a href='index.php?id=".$fila['id']."' class='btn btn-info' role='button'>Editar</a>
<input type='button' class='btn btn-danger borrar ' value='Borrar'>
<a href='crud.php?id=".$fila['id']."' class='btn btn-danger si' role='button'>Borrar</a>
<input type='button' class='btn btn-black cancelar' value='Cancelar'>
</div>";
And then with jquery I want hide and show the buttons separated but when I press one of the buttons it affect to all. This is the jQuery:
<script>
$(document).ready(function(){
$(".si").hide();
$(".cancelar").hide();
var botones=document.querySelectorAll(".borrar");
for(i=0;i<botones.length;i++){
botones[i].addEventListener("click",cancelar,false);
}
});
function cancelar(e){
$(".si").toggle();
$(".cancelar").toggle();
$(e.target).toggle();
$(".cancelar").on("click", function(){
$(".borrar").show();
$(".si").hide();
$(".cancelar").hide();
});
}
</script>
How could I do it?

Answer 1

You can toggle each button with the click() on the selector and toggle() on your button e.g.:
$("selector").click(function(){
$(".yourtBtn").toggle();
});

Answer 2

You want to use $(this) to isolate which item you want to act on. This is an example of the difference:
https://jsfiddle.net/dto07w65/1/
In your case, it might be something like:
<script>
$(function() {
// When you click on any elements with this class
$(".cancelar").on("click", function(){
e.preventDefault();
// Get the parent that wraps this particular clicked element
var parent = $(this).parents('.cartasdos');
// Once selected, show just this element
parent.find(".borrar").show();
// Hide all the others
parent.find(".si").hide();
parent.find(".cancelar").hide();
});
});
</script>
I am not 100% how you want your buttons to work, but his shows how to isolate using $(this).

Answer 3

I finally solve it with an incremented $id, inside of the bucle that print the buttons y write the $id in the principal button and in the rest of buttons I put it in the class:
$id=0;
while($fila=mysqli_fetch_array($res)){
$id++;
print "
<div class='col-sm-6 col-md-6 col-lg-3 col-xl-3 cartasdos'>
<figure><img class='imagenEditar' height='190px' width='100%' src='../img/relatos/".$fila['imagen']."'></figure>
<h3>".$fila['titulo']."</h3>
<h5>".$fila['autor']."</h5>
<h6 class='resumen'> ".$fila['sinopsis']." </h6>
<a href='index.php?id=".$fila['id']."' class='btn btn-info' role='button'>Editar</a>
<input type='button' class='btn btn-danger borrar' id='".$id."' value='Borrar'>
<p class='seguro ".$id."'>Ana, ¿Estás segura?</p>
<a href='crud.php?id=".$fila['id']."' class='btn btn-danger si ".$id."' role='button'>Borrar</a>
<input type='button' class='btn btn-black cancelar ".$id."' value='Cancelar'>
</div>
";
}
And in the jquery code I take the e.target.id for the buttons with the $id in the class and e.target for the principal button with the $id in the id:
<script>
$(document).ready(function(){
$(".seguro").hide();
$(".si").hide();
$(".cancelar").hide();
var botones=document.querySelectorAll(".borrar");
for(i=0;i<botones.length;i++){
botones[i].addEventListener("click",cancelar,false);
}
});
function cancelar(e){
$("."+e.target.id).slideDown('slow');
$(e.target).slideUp('slow');
$(".cancelar").on("click", function(){
$(e.target).slideDown('slow');
$("."+e.target.id).slideUp('slow');
});
}
</script>