using while loop inside ajax - php

Question

I'm trying to use a while loop inside in PHP And Ajax.
But I only get the First ID, not the 2nd, 3rd and so on.
Here is the code Of PHP:
<div class="container pt-5 my-5">
<section class="p-md-3 mx-md-5 text-center">
<h2 class="text-center mx-auto font-weight-bold mb-4 pb-2">Our Team</h2>
<div class="row">
<?php while ($t_run=mysqli_fetch_array($t_query)){?>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="p-4">
<div class="avatar w-100 white d-flex justify-content-center align-items-center">
<input type="hidden" name="team" class='team_id' value="<?php echo $t_run['id']?>">
<img src='images/<?php echo $t_run['img']?>'class="team_img rounded-circle z-depth-1-half"/>
</div>
<div class="text-center mt-2">
<h6 class="font-weight-bold pt-2"><?php echo $t_run['name']?></h6>
<p class="text-muted">
<small><i><?php echo $t_run['title']?></i></small>
</p>
<button class="team btn-info border-0 p-2 rounded">View profile</button>
</div>
</div>
</div>
<?php }?>
</div>
</section>
and here is the Ajax code I use
<script type="text/javascript">
$(document).ready(function () {
$('.team').click(function (){
var name = $('.team_id').val();
$('#content_container').load('team-ajex.php',{
id:name
});
});
});
</script>

Answer 1

I'd recommend you to try to change
$('.team_id').val()
to
$(this).parent().parent().find('input[name="team"]').val()
When you try to get $('.team_id') it returns an array of all inputs with this class...