.html() function of jQuery only working on the first element

I’m working on a system for an assignment given to us with my partner using wordpress and php. We’ve done some work already but there’s this one problem I’m having trouble with.

Whenever I use the .html() function in ajax only the first element of the tab gets the query result I have

Here are my codes:

index.php

<?php get_header(); ?>
    <body>
                                <!--- START HEADER -->
        <header>
            <div class="wrapper">
                    <h1 id="logo">Logo</h1>
                <nav>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="#" id="myBtn">Create Team</a></li>
                        <li><a href="">Metrics</a></li>
                        <li><a href="">About Us</a></li>
                    </ul>
                </nav>
            </div>
        </header>
                                <!--- END HEADER -->

                                <!--- START MAIN CONTENT -->

        <div class="wrapper">
            <div id="teamholder">
                <!--- ACCORDION HTML -->
                <!--- END OF ACCORDION HTML -->
            </div>

            <div id="profileholder">
            </div>

            <div id="randomdiv">
            </div>
        </div>

teams.php

<?php
    // Display members from database
    $connect = mysqli_connect('localhost', 'root', '', 'chansandbox');

    if(isset($_POST['display'])){
        $team = "SELECT * FROM team";
        $resultTeam = mysqli_query($connect, $team);

        while($arrayTeam = mysqli_fetch_array($resultTeam)){
            ?>
                <ul class="teams">
                    <li><a href="#"><i class="fa fa-cog"></i><?php echo $arrayTeam['team_name']; ?></a>
                        <ul class="menu">
                            <li id="memberholder">
                            </li>
                        </ul>
                    </li>
                </ul>
            <?php
        }
        exit();
        mysqli_close($connect);
    }

members.php

<?php
// Display members from database
    $connect = mysqli_connect('localhost', 'root', '', 'chansandbox');

    if(isset($_POST['display'])){
        /*
        $numTeams = "SELECT count(*) AS 'number' FROM team";
        $resultNumTeams = mysqli_query($connect, $numTeams);
        $arrayNumTeams = mysqli_fetch_array($resultNumTeams);

        for($i=$arrayNumTeams['number'];)
        */

        $member = "SELECT * FROM employee";
        $resultMember = mysqli_query($connect, $member);

        while($arrayMember = mysqli_fetch_array($resultMember)){
            ?>
                <h1><?php echo $arrayMember['emp_fname'] . " " . $arrayMember['emp_lname']; ?></h1>
            <?php
        }
        exit();
        mysqli_close($connect);
    }

script.js

//------------- ACCORDION DISPLAY DATA ------------//

function displayTeamFromDatabase($){
    $.ajax({
        url: "http://localhost:81/chansandbox/wp-content/themes/Skeleton/teams.php",
        method: "POST",
        async: false,
        data: {
            "display": 1
        },
        success: function(d){
            $("#teamholder").html(d);
        }
    });
}

function displayMemberFromDatabase($){
    $.ajax({
        url: "http://localhost:81/chansandbox/wp-content/themes/Skeleton/members.php",
        method: "POST",
        async: false,
        data: {
            "display": 1
        },
        success: function(d){
            $("#memberholder").html(d);
        }
    });
}

As you can see I’m trying to show all the data of the employee table to each tab of the responsive accordion to which it generates a new tab for each entry inside the team table. What I don’t understand is why only the first tab has the list of data from the employee table.

Any reply would be appreciated, thank you.

Also I used this guide as reference for the teams and members.php
https://www.youtube.com/watch?v=gTQU_veJ6Kk&feature=youtu.be&t=1391

Read more here: .html() function of jQuery only working on the first element

Leave a Reply

Your email address will not be published. Required fields are marked *