There are several panels stacked below each other.
Each panel has a button that, when clicked by the user, should move the panel to the bottom of the stack.
For example: If there are 10 panels aligned sequentially and the user wants to remove Panel 2 by clicking the button, it should move below all other panels and become the 10th Panel. (No need to change IDs or values, just a simple movement without animation)
Any suggestions on how to achieve this using CSS or JQuery?
Here is a scenario for reference:
Fiddle: https://jsfiddle.net/k5491Lg3/
<div id="accountInfo" class="accountInfo">
<div id="accountTrue">
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 1
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 1
<!-- End panel -->
<input type="button" id="toBeRemoved1" value="Remove it Later" />
</div>
<!-- End fieldset -->
</div>
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 2
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 2
<!-- End panel -->
<input type="button" id="toBeRemoved2" value="Remove it Later" />
</div>
<!-- End fieldset -->
</div>
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 3
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 3
<!-- End panel -->
<input type="button" id="toBeRemoved3" value="Remove it Later" />
</div>
<!-- End fieldset -->
</div>
</div>
</div>