I created multiple paragraphs to show in single modal on specific Class from button inside the table. I created class "dugme_${kurs.id}" in json append and that works fine. Every button have their own unique class name.
<td><button id="` + kurs.details + `" class="btn button_kurs dugme_${kurs.id}">
Details</button></td>
Here’s code for function:
$(document).ready(function() {
let m1 = document.querySelector("#modal1text");
let m2 = document.querySelector("#modal2text");
let m3 = document.querySelector("#modal3text");
let m4 = document.querySelector("#modal4text");
let m5 = document.querySelector("#modal5text");
let m6 = document.querySelector("#modal6text");
$('.dugme_1').click(function() {
$(m1).css('display','block');
});
$('.dugme_2').click(function() {
$(m2).css('display','block');
});
$('.dugme_3').click(function() {
$(m3).css('display','block');
});
$('.dugme_4').click(function() {
$(m4).css('display','block');
});
$('.dugme_5').click(function() {
$(m5).css('display','block');
});
$('.dugme_6').click(function() {
$(m6).css('display','block');
});
$('#modalInfo').on('hidden.bs.modal', function () {
$('#modal1text, #modal2text, #modal3text, #modal4text, #modal5text, #modal6text').css('display','none');
})
});
Style is applied on every paragraf style="display:none;"
For some reason text is not displayed from #modal1text on first click when open modal. Only on second. I’m still learning to code and I got stuck on this. Tried to google answer but nothing like this that I can found.
2
Answers
Give each a unique ID or use data-attribute to target the modal. You can even have one modal and change the content but we need to see more HTML to decide on that
Also be consistent. Why use document.getElementById AND $("#…") – EITHER use jQuery OR use plain JS.
Actually if you are using bootstrap modals, then your code should look different since they have built-in support to target the relevant modal from code in the button
https://getbootstrap.com/docs/5.3/components/modal/
You can try this (i commented my code)