使用Handlbars JS和mysql查询填充多张卡,但只有一个按钮起作用

<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>