While loop within another while loop is not working

I can not fetch data whithin a while loop which is another while loop.

<div class="row p_10" id="select_subject_div" style="display: none;">
  <?php
  $index_subjects_sql = "SELECT * FROM index_subjects";
  $index_subjects_result = mysqli_query($conn, $index_subjects_sql);
  while($index_subjects_data = mysqli_fetch_assoc($index_subjects_result)) {
  ?>
    <div id="index_subject_item_div_<?=$index_subjects_data['subject_id']?>" style="width: 240px; position: relative; float: left;">

      <div class="p_5 border_1 bg_black" id="subject_color_palette_container_<?=$index_subjects_data['subject_id']?>" style="width: 350px; position: absolute; top: 100%; float: left; display: none; z-index: 1;">
        
        <?php
        $color_palettes_sql = "
        SELECT * FROM `index_color_palettes`";
        $color_palettes_result = mysqli_query($conn, $color_palettes_sql);
        while($color_palettes_data = mysqli_fetch_assoc($color_palettes_result)) { 
        ?>
          <input type="button" id="choose_subject_color_button_<?=$color_palettes_data['color_palette_id']?>" style="background-color: <?=$color_palettes_data['color_hex_code']?>; border: none; width: 60px; height: 20px; margin: 0px; padding: 0px;" value="<?=$color_palettes_data['color_hex_code']?>" onclick="choose_subject_color_function_<?=$color_palettes_data['color_palette_id']?>()" >

          <script type="text/javascript">
          function choose_subject_color_function_<?=$color_palettes_data['color_palette_id']?>()
          {
            alert ("<?=$color_palettes_data['color_name']?>"); // PROBLEM - only the last item is coming
            alert ("<?=$index_subjects_data['subject_id']?>"); // PROBLEM - only the last item is coming
          }
          </script>
        <?php 
        }
        ?> <!-- ---------- Close While : color_palettes_data ---------- -->

      </div>
    </div> <!-- ---------- Close : index_subject_item_div_ ---------- -->
  <?php 
  } 
  ?> <!-- ---------- Close While : index_subjects_data ---------- -->
</div> <!-- ---------- Close : row ---------- -->

I can not fetch the data of - <?=$index_subjects_data['subject_id']?> which is within a while loop of "color_palettes_data" which is within another while loop "index_subjects_data"

alert ("<?=$index_subjects_data['subject_id']?>"); // PROBLEM - only the last item is coming

But I should get different subject id when I click on different button - choose_subject_color_button_....................

How can I get the value there within the function ?
Please help.
Thanks.

First thing, since you are declaring the javascript function choose_subject_color_function_() in a while loop, only the last iteration will be kept for this function definition.

Here is what I mean:
The while loop while iterate over the data and recreate the choose_subject_color_function_ function multiple times.
On each loop, you are passing a variable that will be set in the alert function.

Here is an visual overview of what's happening with the alert() value at each loop assuming that last iteration is at 10:

Hence, your alert will always output the subject_id of the last iteration of the while loop, such as alert(11).

Solution

The solution to your problem resides in declaring your JS function outside of the while loops and passing the value you want to alert in the parameters of the function.

function choose_subject_color_function(subject_id) {
    alert(subject_id)
}

So what you're seeing is because of how PHP handles scoping.

You can try this code and let me know how it goes...

<div class="row p_10" id="select_subject_div" style="display: none;">
  <?php
  $index_subjects_sql = "SELECT * FROM index_subjects";
  $index_subjects_result = mysqli_query($conn, $index_subjects_sql);
  while ($index_subjects_data = mysqli_fetch_assoc($index_subjects_result)) {
    ?>
    <div id="index_subject_item_div_<?=$index_subjects_data['subject_id']?>" style="width: 240px; position: relative; float: left;">
      <div class="p_5 border_1 bg_black" id="subject_color_palette_container_<?=$index_subjects_data['subject_id']?>" style="width: 350px; position: absolute; top: 100%; float: left; display: none; z-index: 1;">
        <?php
        $color_palettes_sql = "SELECT * FROM `index_color_palettes`";
        $color_palettes_result = mysqli_query($conn, $color_palettes_sql);
        while ($color_palettes_data = mysqli_fetch_assoc($color_palettes_result)) {
          ?>
          <input type="button" id="choose_subject_color_button_<?=$color_palettes_data['color_palette_id']?>" style="background-color: <?=$color_palettes_data['color_hex_code']?>; border: none; width: 60px; height: 20px; margin: 0px; padding: 0px;" value="<?=$color_palettes_data['color_hex_code']?>" onclick="choose_subject_color_function('<?=$index_subjects_data['subject_id']?>')" >
          <?php 
        }
        ?> <!-- ---------- Close While : color_palettes_data ---------- -->
      </div>
    </div> <!-- ---------- Close : index_subject_item_div_ ---------- -->
    <?php 
  } 
  ?> <!-- ---------- Close While : index_subjects_data ---------- -->
</div> <!-- ---------- Close : row ---------- -->

<script type="text/javascript">
function choose_subject_color_function(subjectId) {
  alert(subjectId);
}
</script>