dodgeitorelse3

if you go to the link requinix posted and click the play button in the result window to see just how the link is created.

I think you need a semi colon at end of $stmt=$db->stmt_init()
 
$stmt=$db->stmt_init();

I have solved my issue.
In index.html I changed the previous button to display:none
<!-- Previous Button --> <button id="prev-btn" style="display:none;"> <i class="fas fa-arrow-circle-left"></i> </button> And then in main.js I added
if(currentState == 1){ prevBtn.style.display = "none"; } underneath the Business Logic section. I also add the display inline or none in 2 places in each of the goNextPage function and the goPrevPage function so they now look like this:
function goNextPage() { if(currentLocation < maxLocation) { switch(currentLocation) { case 1: openBook(); prevBtn.style.display = "inline"; paper1.classList.add("flipped"); paper1.style.zIndex = 1; break; case 2: paper2.classList.add("flipped"); paper2.style.zIndex = 2; break; case 3: nextBtn.style.display = "none"; paper3.classList.add("flipped"); paper3.style.zIndex = 3; closeBook(false); break; default: throw new Error("unkown state"); } currentLocation++; } } function goPrevPage() { if(currentLocation > 1) { switch(currentLocation) { case 2: closeBook(true); prevBtn.style.display = "none"; paper1.classList.remove("flipped"); paper1.style.zIndex = 3; break; case 3: paper2.classList.remove("flipped"); paper2.style.zIndex = 2; break; case 4: openBook(); nextBtn.style.display = "inline"; paper3.classList.remove("flipped"); paper3.style.zIndex = 1; break; default: throw new Error("unkown state"); } currentLocation--; } }  

you are confusing
customer_id = :id;
for
customer_id = :customer_id;

if I understand correctly this should work.
echo "<div class='field-container'>"; if($game['platform2'] !== ""){ echo "<div class='title'>Platform</div> <div class='information'>{$game['platform2']}</div> <div class='title'>Launcher</div> <div class='information'>{$game['launcher2']}</div>"; } echo "</div>";  

I ended up with this however I suppose a php memory issue will arise when enough data is retrieved.

 
$all_data = array(); foreach($id as $idkey => $iduse){ $temparr=array(); $result_time = $conn->query("SELECT * FROM ".$iduse." order by timedate Asc"); while ($rowtime = $result_time->fetch_row()) { $temparr[] = $rowtime; } array_push($all_data, array("id" => $idonly[$idkey], "comment" => $comment[$idkey], "data" => $temparr)); } Also thank you Barand for the fetch_row replacement.

var labelsdb = <?php echo json_encode($labelsdb); ?>; //array from database for dates and times var datadb = <?php echo json_encode($datadb); ?>; // array from database for number of players var datadon = <?php echo json_encode($datadon); ?>; // array from database for number of players var datadoff = <?php echo json_encode($datadoff); ?>; // array from database for number of players var ctx = document.getElementById("myChart"); // points to canvas ctx.style.backgroundColor = "#2F3136"; //canvas background color var myChart = new Chart(ctx, { type: 'line', data: { labels: labelsdb, datasets: [{ label: 'Players', yAxisID: 'A', backgroundColor: '#593A45', // color for active players bars in graph borderWidth: 1, // border for active players bars in graph borderColor: '#F45E7F', steppedLine: true, //true keeps even line horizontal until change, false displays curved line data: datadb }, { label: 'Online', yAxisID: 'B', backgroundColor: '#808080', // color for active players bars in graph borderWidth: 1, // border for active players bars in graph borderColor: '#CECECE', steppedLine: true, //true keeps even line horizontal until change, false displays curved line data: datadon }] }, options: { responsive: true, //whether graph is responsive when zoom in or out maintainAspectRatio: false, scales: { xAxes: [{ scaleLabel: { display: true, fontColor: '#FFFFFF', fontStyle: 'bold', fontSize: 14 }, ticks: { autoSkip: false, maxTicksLimit: 24, maxRotation: 45, //rotate text for hours at bottom of graph minRotation: 45, //rotate text for hours at bottom of graph fontColor: '#FFFFFF', // color of hours at bottom of graph major: { enabled: true, // <-- This is the key line fontStyle: 'bold', //You can also style these values differently fontSize: 14 //You can also style these values differently } }, type: 'time', //to show time at bottom of graph time: { unit: 'hour', displayFormats: { hour: 'hA', //example displays 9AM or 6PM stepSize: 1 //1 for each hour to display at bottom of graph, 2 to show every 2 hrs. } }, display: true, gridLines: { display: true, // display vertical gridline color: '#686868', //color of vertical gridlines zeroLineColor: '#686868' //colors first vertical grid line } }], yAxes: [{ id: 'A', type: 'linear', position: 'left', ticks: { fontColor: '#FFFFFF', // color of numbers at left side of graph for number of players stepSize: 1 }, gridLines: { display: true, //display horizontal gridlines color: "#686868" //color of horizontal gridlines }, scaleLabel: { display: true, //display label at left vertical side of graph labelString: 'Players', //text to be displayed at left vertical side of graph fontColor: '#FFFFFF', fontStyle: 'bold', fontSize: 14, } }, { id: 'B', type: 'linear', position: 'right', ticks: { max: 1, min: 0, stepSize: 1, fontColor: '#808080', fontStyle: 'bold', fontSize: 14 }, gridLines: { display: true, //display horizontal gridlines color: "#686868" //color of horizontal gridlines }, scaleLabel: { display: true, labelString: 'Online', fontColor: '#808080', fontStyle: 'bold', fontSize: 14 } }] } } }); Solved!!