Q:

using Handlbars JS with mysql query to populate multiple cards but only 1 button works

I have set up a template in handlebars js to display info for each entry in my mysql query.  the code works and I get back the expected display (16 info cards with a button that should display more info).  
the issue I am having is that each returned info card has a div/button that when clicked should display more info for that card.  However, only the first button on the first returned info card works.  the button is being called by id and when I change to call it by class it displays all the correct info but for all 16 cards at the same time.  None of the other 15 buttons respond by id or class. 
Any suggestions on how I can get all 16 cards to react individually when their corresponding button is clicked?  

<div class="force-block"> 
 {{#each taco }}  //for each loop
  <div id="main-bio-block">
 <div class="performer-image"><img src="{{this.image}}" class="user-image">
 </div>
    <div class="info" id="info-modal">
                <p>Country: {{this.country}}</p>
    <p>Earnings: {{earnings}}</p>
    <p>Wins: {{wins}}  Losses: {{loss}}</p>
    <p>Titles: {{titles}}  Gold: {{gold}} </p>
    <p>Silver: {{silver}}  Bronze: {{bronze}}</p>
    </div>
         <div id="user-name"><p>{{this.handle}}</p></div>
     //this is the button in question
                    <div class="modal-btn" id="bio-modal">
                      <p>Bio Info</p>
                    </div>
              <div class="modal-btn" id="accolades-modal">
                      <p>Accolades</p>
                    </div>
//below is the modal hidden until bio-modal is clicked. 
  <div class="many" id="info-1">
   <span class="close">&times;</span>
    <div class="info-content">
     <p>{{bio}}</p>
    </div>
  </div>

  </div>
{{/each}}  

</div>


<script type="text/javascript">
  $('#bio-modal').click(function(){
   $('#info-1').show();
  });

  $('.close').click(function(){
   $('#info-1').hide();
  });

  
 </script>

A:

From what I can see you use multiple times the same id in your loop :
<div id="main-bio-block">

<div class="modal-btn" id="bio-modal">

<div class="many" id="info-1">

Your ids should be unique so that they don't appear multiple times in your page. 
In your case you'll get 16 times each id that you used in your loop. 
Instead of this you could use the index number of your loop to generate something unique like that 
<div class="many" id="info-{{@index}}">

The same thing for your bio-modal button :
<div class="modal-btn" onclick="toggleinfo('info-{{@index}}')">
   <p>Bio Info</p>
</div>

Once you've done this you just need a toggleinfo function like this :
<script type="text/javascript">
        function toggleinfo(id){
            $(id).toggle();
        }
</script>

