My script open all "Read More" Boxes but should only be 1

Question

I used the code from this site(https://html-online.com/articles/simple-popup-box/) to create some read more buttons in my website. But they are linked together so when they press 1 they all open. Is there a quick tweak I can apply without having to copy the script and the whole CSS 10x and then rename it?

Answer 1

The probem is JS, which says (I'll simplify class names):

$(".button1").click(function()
       $('.class1').show();

this way it will show all the elements with the class1 class. If you want to open only one, you need to give it an id, and have a button for each, or, even better do this:

docuemnt.getElementByID("asd").addEventListener("click", function(){
    //do the showing
}) 

or, if it isn't working:

let a = document.querySelectorAll(".class1");
a.addEventListener("click", function(){
  //do the showing
})