My php while loop is not parsing the whole table - php

Question

I have two tables in my webpage, each being populated with a php while loop.
My first table gets all its data outputted but my second while loop only outputs as many fields as the first one.
My second while loop is not nested within the other one, they are both independent from each other.
When i check the console I see that my second while loops seems to have outputted my data but when I click on my button to display the entire column, only 3 values appear instead of all of them
This is what is shown when I click on TEAM TASK
https://imgur.com/4FCu1dX
This is what is shown when I click on MY TASK
https://imgur.com/q1F6sgx
I also noticed that whether I click on MYTASK or TEAM TASK their are two rows from MYTASK that are always shown.
I Initially had both while loops within the same table but then moved them to each fill there own table but this issue still occurs.
<table border='0' style="float:left; width:20%; height: 500px; border-radius: 5px; display: block;" bgcolor="#2B4353">
<thead>
<tr>
<td bgcolor="#2B4353" border="0" valign="top" align="right">
<div class="messages-header-my" onclick="myTasks()"><p id="myTasks">MY TASKS</p></div></td>
</tr>
</thead>
<tbody>
<?php
while($row8 = mysqli_fetch_array($TableMY)){ $task1234=$row8[1];
?>
<tr id="my" style="display: block;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
<?php if ($row8[0]=='HIGH')
{$statuscss= 'taskHigh';}
elseif ($row8[0]== 'MEDIUM')
{$statuscss= 'taskMedium ';}
else{ $statuscss= 'taskLow';}
echo 'class="',$statuscss,'"';?> style="margin-left: 30px;">OD_<?php echo $task1234?></p></td></tr>
<?php }?>
</tbody>
</table>
<table border='0' style="float:left; width:20%; height: 500px; border-radius: 5px; display: block;" bgcolor="#2B4353">
<thead>
<tr>
<td bgcolor="#2B4353" border="0" valign="top" align="right">
<div class="messages-header-team" onclick="teamTasks()"><p id="teamTasks">TEAM TASKS</p></div></td>
</tr>
</thead>
<tbody>
<?php
while($row8 = mysqli_fetch_array($TableTeam)){ $task1234=$row8[1];
?>
<tr id="team" style="display:none;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
<?php if ($row8[0]=='HIGH')
{$statuscss= 'taskHigh';}
elseif ($row8[0]== 'MEDIUM')
{$statuscss= 'taskMedium ';}
else{ $statuscss= 'taskLow';}
echo 'class="',$statuscss,'"';?> style="margin-left: 30px;">OD_<?php echo $task1234?></p></td></tr>
<?php }?>
</tbody>
</table>
My php
require('server.php');
session_start();
$email=$_SESSION['email'];
$sqli="Select URLDomain from Admin.Users where Email = ?";
$stmt =mysqli_prepare($link,$sqli);
mysqli_stmt_bind_param($stmt,"s",$email );
mysqli_stmt_execute($stmt);
$useremail=mysqli_stmt_get_result($stmt);
$row = mysqli_fetch_array($useremail);
$DBdomain=$row[0];
mysqli_select_db($link,"Universe");
$stmt = mysqli_prepare($link,"Select Priority,TaskNumber from Task where urlDomain=?");
mysqli_stmt_bind_param($stmt,"s",$DBdomain );
mysqli_stmt_execute($stmt);
$TableTeam=mysqli_stmt_get_result($stmt);
mysqli_stmt_close($stmt);
mysqli_select_db($link,"Universe");
$stmt = mysqli_prepare($link,"Select Priority,TaskNumber from Task where TaskOwner=?");
mysqli_stmt_bind_param($stmt,"s",$email );
mysqli_stmt_execute($stmt);
$TableMY=mysqli_stmt_get_result($stmt);
mysqli_stmt_close($stmt);
Here is my Javascript
<script>
function messagesTab() {
document.getElementById("task-message").style.display = "block";
}
</script>
<script>
function myTasks() {
document.getElementById("myTasks").style.color = "#1FAC96";
document.getElementById("teamTasks").style.color = "#FFFFFF";
document.getElementById("team").style.display = "none";
document.getElementById("my").style.display = "block";
document.getElementById("messageDisplay").style.display = "block";
document.getElementById("myTaskView").style.display = "none";
}
</script>
<script>
function teamTasks() {
document.getElementById("teamTasks").style.color = "#1FAC96";
document.getElementById("teamTasks").style.underline = "#1FAC96";
document.getElementById("myTasks").style.color = "#FFFFFF";
document.getElementById("team").style.display = "block";
document.getElementById("my").style.display = "none";
document.getElementById("myTaskView").style.display = "none";
document.getElementById("messageDisplay").style.display = "block";
}
</script>
<script>
function myTaskView(Task_Number) {
$.ajax({
url:'messages_select.php',
type:'POST',
data:{Task_Number:Task_Number},
success:function(data){
$('#myTaskView').html(data);
document.getElementById("myTaskView").style.display = 'block';
document.getElementById("messageDisplay").style.display = 'none';
}
});
}
</script>
<script>
var main = function() {
$('form').submit(function(event) {
var $input = $(event.target).find('input');
var comment = $input.val();
if (comment != "") {
var user = '<i class="fas fa-user-circle"></i>';
var userInfo = $(user).text(' '+'nataliekoly#mail.usf.edu'+' | '+'01/31/19'+' | '+'3:45 PM')
var comment = $('<li>').text(comment);
comment.prependTo('#comments');
userInfo.prependTo('#comments');
$input.val("");
}
return false;
});
}
$(document).ready(main);
</script>

Answer 1

IDs need to be unique, you can't have id="my" and id="team" on each row of the table. Use classes instead:
<tr class="my" style="display: block;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
and
<tr class="team" style="display:none;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
Then you need to loop over them:
document.querySelectorAll(".my").forEach(el => el.style.display = "block");