How do I use javascript to add class=open into rendered <div class="card flex-row"> using map().
On the inspect element browser i see the reaction on click but that action didn't adding the determined class
Here is my code :
function fetchingData() {
fetch("http://localhost:3001/quote/sendquote")
.then((response) => {
if (!response.ok) {
throw Error;
}
return response.json();
})
.then((data) => {
console.log(data);
const rend = data.person
.map((data) => {
return `
<div class='card flex-row'>
<img src='https://png.pngtree.com/png-vector/20191023/ourlarge/pngtree-user-vector-icon-with-white-background-png-image_1849343.jpg' class='book'>
<div class='flex-column info'>
<div class='title' id="person">Dear ${data.frstname}</div>
<div class='author'></div>
<div class='hidden bottom summary'>
<input id="quote" type="text" value="">
</div>
</div>
<div class='flex-column group'>
<div class='members'>
<span class='current'>14</span> /
<span class='max'>30</span>
</div>
<div class='hidden bottom'>
<button class='simple'>Submit</button>
</div>
</div>
</div>`;
})
.join("");
console.log(rend);
document.querySelector(".center").insertAdjacentHTML("afterbegin", rend);
})
.catch((err) => {
console.log("rejected", err);
});
}
fetchingData();<div class='container'>
<div class='center list flex-column'>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
let old = $(".card").get(0);
$(".card").click(function() {
if (old != null && $(old).hasClass("open")) $(old).toggleClass("open");
$(this).toggleClass("open");
old = this;
});
</script>
<script>
</script>