Carrying specific body class onto every page | Wordpress - html

Question

I have the following code, when the user presses the 'x' I want to make sure it doesnt pop up again, how would I copy the body class 'demoBookedHidden' to any future page the user goes to?
Currently the code works for the one page the user visits but the body class doesn't carry across to another page.
$(".demoBookedContentClose").click(function(){
$("body").addClass("demoBookedHidden");
});
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var queue = [];
function setUp() {
var elems = $(".demoBooked").get();
queue = shuffle(elems);
showNext();
}
function showNext() {
var elem = queue.pop();
if (elem) {
$(elem)
.fadeIn(2000)
.delay(5000)
.fadeOut(1000, function(){ setTimeout(showNext,25000); });
} else {
setUp();
}
}
setUp();
.demoBooked {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.08);
border: 1px solid #dddddd;
padding: 20px;
border-radius: 8px;
display: none;
}
.demo-booked-section {
position: fixed;
bottom: 10px;
left: 10px;
z-index: 2;
}
.demoBooked h3 {
font-size: 22px;
font-weight: 900;
margin-bottom: 4px;
}
.demoBooked img {
max-width: 50px;
margin-top: -55px;
border-radius: 100%;
display: inline-block;
}
.demoBookedContent {
display: inline-block;
padding-left: 20px;
}
.demoBooked p {
font-size: 18px;
line-height: 20px;
}
.demoBookedTime {
color: #e12826;
}
.demoBookedContentClose {
position: absolute;
right: 15px;
top: 10px;
font-size: 10px;
cursor: pointer;
}
.demoBookedHidden .demo-booked-section {
display: none!important;
}
#media only screen and (max-width: 768px) {
.demo-booked-section {
display: none!important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-booked-section">
<div class="demoBooked">
<img src="/wp-content/uploads/2021/01/william-diaz.jpg">
<div class="demoBookedContent">
<span class="demoBookedContentClose">X</span>
<h3>William Diaz</h3>
<p class="demoBookedText">Booked in his free trial</p>
<p class="demoBookedTime">1hrs ago</p>
</div>
</div>
<div class="demoBooked">
<img src="/wp-content/uploads/2021/01/freya-smith.jpg">
<div class="demoBookedContent">
<span class="demoBookedContentClose">X</span>
<h3>Freya Smith</h3>
<p class="demoBookedText">Booked in her free trial</p>
<p class="demoBookedTime">3hrs ago</p>
</div>
</div>
<div class="demoBooked">
<img src="/wp-content/uploads/2021/01/mia-fleming.jpg">
<div class="demoBookedContent">
<span class="demoBookedContentClose">X</span>
<h3>Mia Fleming</h3>
<p class="demoBookedText">Booked in her free trial</p>
<p class="demoBookedTime">2hrs ago</p>
</div>
</div>
</div>

Answer 1

You can use sessionStorage to let the browser know if it has already shown the popup.
For more info check out this answer