I want to make a dynamic display and hide button and i have ejs template

This is my schema and controller js:

const foodSchema = new mongoose.Schema({
  foodName: {
    type: String,
    required: [true, "A food must have a name"],
  },
  Link: {
    type: String,
    required: [true, "A food must have a link"],
    unique: true,
  },
  emoji: {
    type: String,
  },
});

const Food = require("../models/foodModel");
Food.find({}, function (err, foundItems) {
    res.status(200).render("icook", {
      foodName: foundItems,
    });
  });

icook.ejs

<div class="meat-table" >
  <% for(let i=0; i<foodName.length; i++) { %>
     <button class="meat-butn-on" id="click">
       <%- foodName[i].emoji %> <%= foodName[i].foodName %>  
     </button>
  <% } %>
</div>
<div class="result">
 Let&apos;s see what&apos;s delicacy for today!
   <% for(let i=0; i<foodName.length; i++) { %>
     <p class="testing"  id="try"><a href="<%= foodName[i].Link %>" role="button"><%= foodName[i].foodName %></a></p>
   <% } %>
</div>

My display.js

let b = 1;
var Test = document.getElementsByClassName("meat-butn-on");
var btn = document.getElementsByClassName("testing");

for (let i = 0; i < Test.length; i++) {
  Test[i].onclick = function () {
    b++;
    if (b % 2 == 0) {
      btn.style.display = "block";
    } else {
      btn.style.display = "none";
    }
  };
}

everything works perfect except this display.js, when i click any button from class meat-butn-on, the console shows the error Cannot set properties of undefined (setting 'display') why is that? I tried use class name from div class but it didn't work either. appreciate any helps

Solution

Here's the working code. querySelectorAll returns an iterable array of elements, so you'd better use it.

let b = 1;

var meatButtons = document.querySelectorAll(".meat-butn-on");
var foodNames= document.querySelectorAll(".testing");
console.log(meatButtons, foodNames);

meatButtons.forEach((t, i) => {
  t.addEventListener("click", function () {
    b++;
    if (b % 2 == 0) {
      foodNames[i].style.display = "block";
    } else {
      foodNames[i].style.display = "none";
    }
  });
});

<div class="meat-table">

  <button class="meat-butn-on">
    Food Name1
  </button>
  <button class="meat-butn-on">
    Food Name2
  </button>
  <button class="meat-butn-on">
    Food Name3
  </button>

</div>
<div class="result">
  Let&apos;s see what&apos;s delicacy for today!

  <p class="testing"><a href="#" role="button">Food Name1</a></p>
  <p class="testing"><a href="#" role="button">Food Name2</a></p>
  <p class="testing"><a href="#" role="button">Food Name3</a></p>

</div>

Live demo here: https://codepen.io/dreambold/pen/dyKBJXK?editors=1111

PS: You have an issue assigning the same id for the buttons, id="click". You should remove this from the buttons, as id's should be unique in a document. The same error is happening in the next paragraph for p tags.

So the code for the buttons will look like this:

<button class="meat-butn-on">
   <%- foodName[i].emoji %> <%= foodName[i].foodName %>  
</button>