Have a Div element with all styling done, I need the site to connect to a MySQL DB and get data from there and populate sections of the div

I have a MySQL DB and have people stored in it. I want to list their profiles on a page. This will be done with a div. The number of people stored will change quite a lot. How can I make it so that the page dynamically adds div's with all the configurations (like classes, id's and child elements) and will populate each section of the DIV with data from the MySQL DB? should i use JS or PHP or something else to do this?

<?php
    require "../includes/header/header.php";
    require "functions.php";
?>
<title>Title</title>
<script src = "index.js"></script>
<link rel = "stylesheet" href = "index.css">

<?php
    $conn = ConnectDB(); //<- function in functions.php
    $result = $conn->query("SELECT * FROM players");
    
    for ($row_no = $result->num_rows-1; $row_no >= 0; $row_no--){
        $result->data_seek($row_no);
        $row = $result->fetch_assoc();
        //echo"Player ".$row['ID']." = ".$row['FIRST_NAME']." ".$row['LAST_NAME'];
    }
    CloseCon($conn);
?>

<?php
    function getPlayers(){
        $playerarr = [];
        global $conn;
        $conn = ConnectDB();
        $result = $conn -> query("SELECT * FROM players");
        CloseCon($conn);
        for ($row_no = $result->num_rows-1; $row_no >= 0; $row_no--){
            $result->data_seek($row_no);
            $row = $result->fetch_assoc();
            array_push($playerarr, $row['ID']);
        }
        return $playerarr;
    }

    function checkIfChosen($player_arr){
        $length_array = count($player_arr);
        global $unchosen_players;
        $unchosen_players=[];
        for ($i=0; $i<$length_array; $i++){
            global $conn;
            $result = $conn -> query("SELECT * FROM players where ID = $i+1");
            $result -> data_seek($i+1);
            $row = $result->fetch_assoc();
            CloseCon($conn);
            if ($row['BEEN_CHOSEN'] == '1'){//If BEEN_CHOSEN is set to 1 (TRUE)
                continue;
            }elseif ($row['BEEN_CHOSEN'] == '0'){//If BEEN_CHOSEN is set to 0 (FALSE)
                array_push($unchosen_players, $row['ID']);
            }
        }
        return $unchosen_players;
    }
    function iterateArray($array){
        $length = count($array);
        for ($i=0; $i<$length; $i++){
            return $array[$i];
        }
    }

    function getPlayerImage($player_id){
        $conn = ConnectDB();
        $result = $conn->query("SELECT IMG_LINK FROM players WHERE ID = $player_id");
        $result -> data_seek($player_id);
        $row = $result ->fetch_assoc();
        CloseCon($conn);
        return $row['IMG_LINK'];
    }
    //print(iterateArray(checkIfChosen(getPlayers())));
    function getPlayerFirstName($player_id){
        $conn = ConnectDB();
        $result = $conn->query("SELECT FIRST_NAME FROM players WHERE ID = $player_id");
        $result->data_seek($player_id);
        $row = $result -> fetch_assoc();
        CloseCon($conn);
        return $row['FIRST_NAME'];
    }

    function increaseByOne($number){
        return $number + 1;
    }
?>


<script>
    var i;
    var divs_num = 0;
    for (i=0; i< <?php print_r(count(getPlayers()));?>; i++){
        var div = document.createElement("div");
        divs_num +=1;
        div.className = "playerProfile";
        div.id = "div"+(i+1);
        document.body.appendChild(div);//add div to HTML page document
        var img = document.createElement("img");//create an img element
        img.alt = "Player-Image";//define the alt
        img.className = "playerImage";//define the class name
        div.appendChild(img);//Adds img element to div element as a child
        var fName = document.createElement("p");
        fName.id = "firstName"+(i+1);
        fName.innerHTML = "First Name";
        div.appendChild(fName);
    }

    <?php global $number; $number = 0;?>

    function setPlayerImages(){
        for (var i=0; i<divs_num; i++){
            document.getElementById("div"+(i+1)).querySelector("img").src = "";//set image for div1
        }
    }

    function setPlayerNames(){
        document.querySelector("#firstName1").innerHTML = "";
    }

    setPlayerImages();
    setPlayerNames();
</script>