HTML5 Collapsable on multiple containers - html

Question

I am trying to have multiple containers and i need them each to be able to collapse and reopen upon user interaction. Presently, i can only open but when i click on the 'Details' the divs do not close.
I have tried altering the collapse and also adding ids and making the data-target that id but still the same issue
Link:
https://www.w3schools.com/code/tryit.asp?filename=G4OW7SFO0DYR

Answer 1

Please try this.
<div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
<h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
button{
padding-left: 40%;
padding-right: 45%;
}
</style>
<div class="container">
<button type="button" data-toggle="collapse" data-target="#demo">Details</button>
<div id="demo" class="collapse multi-collapse">
Brands of water include: Dasani, Nestle, and Fiji
</div>
</div>
</div><span id="next-content0"></span></div>
---------------
------------------
------------
<div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
<h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
<div class="container_1">
<button type="button" data-toggle="collapse" data-target="#demo_1">Details</button>
<div id="demo_1" class="collapse multi-collapse">
Brands of water include: Dasani, Nestle, and Fiji
</div>
</div>
</div><span id="next-content0"></span></div>
Please add your CSS and JS in the head tag. you don't need to call CSS and JS everywhere.