I have an annoying issue where once the client device has hidden data using:

echo "function hideReq";
echo $row['requestID'];
echo "() {";
echo "var x = document.getElementById('play";
echo $row['requestID'];
echo "');";
echo "if (x.style.display === 'none') {";
echo "x.style.display = 'block';";
echo "} else {";
echo "x.style.display = 'none';";
echo "}";

The code above adds the script dynamically through the same PHP that adds the ID's data so that each ID's data can be affected by the script itself.

It is unset once the data has been refreshed through php using:

$(document).ready(function(){
function getData(){
$.ajax({
type: 'POST',
url: 'locationData.php',
success: function(data){
$('#dataoutput').html(data);
}
});
}
getData();
setInterval(function () {
getData(); 
}, 120000);  // it will refresh your data every 3 mins
});

The code above gets the data from an external PHP document that is added to a div on the page on a 3-minute cooldown.

To clarify, the code works as expected. Once the refresh cooldown has been reached the data loads as it is meant to. However, the hidden rows are once again visible.

I just need to know how to either;

1. Make it so that the data requests only the data with the IDs that are not already on the device so that it can remember the hidden rows
2. Add a method that will still refresh all of the data and also keep the rows hidden. Whichever is easier.