在ajax内部使用while循环

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