Any operation performed using jQuery is valid only for the lifetime of the current page. After reloading the page, all these changes will be lost.
If you want the button to remain hidden, you need to store this information somewhere. You can make a request to the server and save it in preference, so the next time you reload your PHP code, you can hide the button. You can also use localStorage to hide:
<script> $(document).ready(function(){ var div1Removed = localStorage.getItem('div1_removed'); if (div1Removed) { $("#div1").remove(); } else { $("#div1").show(); } $("#button").click(function(){ $("#div1").remove(); localStorage.setItem('div1_removed', 'true'); }); }); </script>
In the PHP code, we add display: hidden to the div, so it is initially hidden. When the page loads, the JavaScript code checks to see if it should be visible or not. If so, that makes it visible. If it is not, then it completely removes it.
while($dbRow=$dbQuery->fetch(PDO::FETCH_ASSOC) and ($cnt < $max)) { echo "<div id='div1' style='display: hidden;'>"."".$dbRow["Name"]."</h4><br>"."<br><img src=/".$dbRow['Picture']."' width='150' height='150' />"."<br><br>".$dbRow["Instructions"]." <form method='POST'><input type='hidden' name='MealID' value= '".$dbRow['MealID']."'> <input type='submit' name='submit' value='Complete' id='button' ></form></div>"; $cnt++;