Like Count button + Card layout not working properly

Question

enter image description here

I am supposed to have three cards on large screens, 2 in tablets, 1 in mobile and all without hard coded html. Only through javascript. However, when I try to add three cards in the same row, it takes the same movie for the entire row and then the next one for the second row and so on.. Also the button only works for the first card... There must be smth wrong in my loop..

This is my code so far:

var parsedMovies = JSON.parse(movies);

for (let i = 0; i < parsedMovies.length; i++) {
  document.getElementById("cards").innerHTML += `
    
    <div class="card-group">
     <div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
       <div class="row g-0 ">
         <div class="col-md-4 ">
           <img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
         </div>
         <div class="col-md-8">
           <div class="card-body">
             <h5 class="card-title">${parsedMovies[i].title}</h5>
             <p class="card-text">${parsedMovies[i].plot}</p>
             <p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
           
        <div class="voting">
            <button id="likebtn">
                <i></i>
            </button>
            <input type="number" id="input1" value="${parsedMovies[i].likes}">
            <button id="dislikebtn">
                <i></i>
            </button>
            <input type="number" id="input2" value="${parsedMovies[i].dislikes}">
        </div>
             </p>

           </div>
         </div>
       </div>
       
     </div>
     <div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
       <div class="row g-0 ">
         <div class="col-md-4 ">
           <img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
         </div>
         <div class="col-md-8">
           <div class="card-body">
             <h5 class="card-title">${parsedMovies[i].title}</h5>
             <p class="card-text">${parsedMovies[i].plot}</p>
             <p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
           
        <div class="voting">
            <button id="likebtn">
                <i></i>
            </button>
            <input type="number" id="input1" value="${parsedMovies[i].likes}">
            <button id="dislikebtn">
                <i></i>
            </button>
            <input type="number" id="input2" value="${parsedMovies[i].dislikes}">
        </div>
             </p>

           </div>
         </div>
       </div>
       
     </div>
     <div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
       <div class="row g-0 ">
         <div class="col-md-4 ">
           <img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
         </div>
         <div class="col-md-8">
           <div class="card-body">
             <h5 class="card-title">${parsedMovies[i].title}</h5>
             <p class="card-text">${parsedMovies[i].plot}</p>
             <p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
           
        <div class="voting">
            <button id="likebtn">
                <i></i>
            </button>
            <input type="number" id="input1" value="${parsedMovies[i].likes}">
            <button id="dislikebtn">
                <i></i>
            </button>
            <input type="number" id="input2" value="${parsedMovies[i].dislikes}">
        </div>
             </p>

           </div>
         </div>
       </div>
       
     </div>

    </div>
    `;

  let likebtn = document.querySelector("#likebtn");
  let dislikebtn = document.querySelector("#dislikebtn");
  let input1 = document.querySelector("#input1");
  let input2 = document.querySelector("#input2");

  likebtn.addEventListener("click", () => {
    input1.value = parseInt(input1.value) + 1;
  });

  dislikebtn.addEventListener("click", () => {
    input2.value = parseInt(input2.value) + 1;
  });

Answer 1

Your loop is creating multiple time the same ids... An id must be unique.

So, remove all id in the HTML "template" and use a class (I used like-action below) on both the like and dislike buttons.

Then, set ONE event handler for those button, since the action is the same (increment by one). See below:

let likebtns = document.querySelectorAll(".like-action");

likebtns.forEach((button)=>{
  button.addEventListener("click", (element) => {
    input = element.nextElementSibling
    input.value = parseInt(input.value) + 1;
  });
});

Have a look at nextElementSibling.