while循环只显示元素x次

Question

I've got this expanding/closing div. Where I would have a category title (to show once) , and underneath have the sub-category information (need to loop through x amount of times). Everything (sort of) works except I need the sub-category information to loop through the amount of times it exists.

For now This is the result I get so far: https://imgur.com/a/nAg2Uhd

As you can see it's closing the tag, looping through again and adding the subcategory underneath

$result_array = mysqli_query($connect,"SELECT * FROM tbl_customer, categories WHERE tbl_customer.category_QA = categories.id ORDER BY Category ASC");
    $checkCategory = '';

    while($data = mysqli_fetch_array($result_array)){


   //works as it shows the category once
       if  ($checkCategory != $data["Category"]){


    echo'           
    <div class="collapse-group">
              <div class="collapse-item">
                <div class="collapse-head">
                      '.$data["Category"].'
                </div>
                <div class="collapse-content">';


      }


    //Here is where I need to loop through all sub category data and display them 
     echo '    <p>  '.$data["productName"].'</p>';



      //Should only run once all sub category data has been displayed 
      //close all tags 
      if  ($checkCategory != $data["Category"]){

    echo    '
                      </div>
                 </div>
              </div>';

        $checkCategory = $data["Category"];


      }

    }

Answer 1

You need to write properly your tags, instead of

'            <
            div class = "collapse-group" >

you need

'<div class = "collapse-group">

and instead of

' <
            /div>

you need

' </div>

This should fix the error, but I will also propose a better approach for you. First of all, you need to make sure this is reusable, so let's make sure it's inside a function. Secondly, you need to make sure that the code generation is separated from the display:

function generateCategories($result_array) {
    $checkCategory = '';
    $output = array();
    $index = -1;
    while ($data = mysqli_fetch_array($result_array)) {
        if ($checkCategory != $data["Category"]) {
            $checkCategory = $data["Category"];
            $output[]=array("key" => $checkCategory, "values" => array());
            $index++;
        }
        $output[$index]["values"][]=$data["productName"];
    }
    return $output;
}

function generateCategoryStructure($input) {
    $output = "";
    for ($index = 0; $index < count($input); $index++) {
        $output .= '<div class = "collapse-group">'.
                       '<div class = "collapse-item">'.
                           '<div class = "collapse-head">'.$input[$index]["key"].'</div>'.
                           '<div class = "collapse-content">';
        for ($innerIndex = 0; $innerIndex < count($input[$index]["values"]); $innerIndex++) {
            $output .=         '<p>'.$input[$index]["values"][$innerIndex].'</p>';
        }
        $output .=         '</div>'.
                       '</div>'.
                   '</div>';
    }
}

and then:

echo generateCategoryStructure(generateCategories($result_array));