I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div.
To accomplish this, I tried using jquery's after() function, but the issue is that it adds the button to the right of the div instead of below it.
Can anyone guide me on how to achieve this desired effect?
PS: I experimented with the append function as well, but there seems to be a conflict with another function that removes the button when clicking on the div again. This creates an issue where clicking on the button (now part of the div) triggers the removal process, disrupting the functionality.
Thank you in advance for any assistance!
Edit...
A big thank you for all the responses provided so far...
My apologies for not presenting the code initially, here is the snippet:
<div class = "classOfDiv">
Placeholder for product details
</div>
$('.classOfDiv').click(
function() {
var border = $(this).css("border");
if (border == "0px none rgb(51, 51, 51)") {
$(this).css("border", "3px solid blue");
$(this).after("<button name='btnDetalhes' class='btn btn-primary'>Detalhes</button>");
} else {
$(this).css("border", "0px none rgb(51, 51, 51)");
$(this).next("[name='btnDetalhes']").remove();
}
}
);