I am having a 6 bootstrap cards as a step in a form wizard and I am having a next button which goes to the next page and then come back the clicked cards are retaining its background color so, my problem when I come back click another card other than that of previously clicked cards and again click next and come back the recently clicked cards only retaining its color For example the first time If I click the 1 and 2 cards and click next and again come back my 1 and 2 are retaining its color and when I again click the 3 and 4 cards and click next again and come back the 3 and 4 cards are retaining its color, not the 1 and 2 but I need all the four cards to retain their color My HTML code is:
$(document).ready(function() {
// goals
$("#room_1").click(function() {
$("#room_1").toggleClass("blue")
});
$("#room_2").click(function() {
$("#room_2").toggleClass("blue")
});
$("#room_3").click(function() {
$("#room_3").toggleClass("blue")
});
$("#room_4").click(function() {
$("#room_4").toggleClass("blue")
});
$("#room_5").click(function() {
$("#room_5").toggleClass("blue")
});
$("#room_6").click(function() {
$("#room_6").toggleClass("blue")
});
$("#room_7").click(function() {
$("#room_7").toggleClass("blue")
});
$("#room_8").click(function() {
$("#room_8").toggleClass("blue")
});
$("#room_9").click(function() {
$("#room_9").toggleClass("blue")
});
});
var goal = []
var goalIds = [];
function getGoal(id) {
if (goal.length > 0) {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data)
var index = goal.indexOf(x)
if (index == -1) {
goal.push(x)
} else {
goal.splice(index, 1)
}
} else {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data)
goal.push(x)
}
localStorage.setItem("goal", JSON.stringify(goal))
goalIds = goal.map(element => JSON.parse(element).id);
console.log(goalIds)
issample();
}
function issample() {
$("#goal").val(goalIds);
console.log(goalIds)
}
function initGoals() {
var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = storedNames.map(element => JSON.parse(element).id);
}
$(function() {
let storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
$.each(storedNames, function(index, value) {
let temp = JSON.parse(value);
$('#room_' + temp['id']).addClass("blue");
console.log($('#' + temp['id']).attr('id'));
});
})/* navbar*/
.navbar{
height:80px;
}
/*container0*/
.container0{
height:550px;
}
/*container*/
.container1{
background-color:white ;
width:450px;
}
/*navbar-brand*/
.navbar-brand{
font-family: 'Monda', sans-serif;
}
/*container-fluid*/
.container-fluid{
background-color: blue;
height:1000px;
}
/*button1*/
.btn1{
background-color: #000080;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/*button2*/
.btn2 {
background-color: white;
color: black;
border: 2px solid #000080;
width:180px;
}
.btn2:hover {
background-color: #000080;
color:white;
}
/*container-3*/
.container-3{
display:inline-block;
width:600px;
height:500px;
}
.link{
{ color: black; }
}
/*card-6*/
.card6{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card6:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/*card-4*/
.card4{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card4:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/*Button4*/
.btn4{
width:300px;
background-color: white;
}
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
/*previous button*/
.previous {
background-color:white;
color: black;
width:300px;
display:block;
border: 2px solid #000080;
}
/*next button*/
.next {
background-color: white;
color: black;
width:300px;
display:block;
border: 2px solid #000080;
}
/* round class*/
.round {
border-radius: 50%;
}
/*.btn card*/
.btncard{
background-color: #000080;
}
/*.blue class*/
.blue{
border: 2px solid #000080;
}
/*range slider*/
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 6px;
height: 10px;
width: 600px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #C5C5C5),
color-stop(0.15, #C5C5C5)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 50%;
background-color: #E9E9E9;
border: 3px solid #CECECE;
height: 25px;
width: 15px;
}
/*container-11*/
.container-11{
width:600px;
background-color: white;
height:800px;
margin-left: auto;
margin-right: auto;
}
/*container1*/
.con1{
width:800px;
height:400px;
border:1px solid grey;
}
/*register*/
#register{
background-color: #000080;
}
/*messages*/
.messages{
color:orange;
}
.messages h5{
font-style: italic;
}
#name_error{
color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="row"><div class="col-4" onclick="getGoal(1)"><div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;"><center><div class="card-body"><p class="card-text mt-4" id="cont_1"><b>I am redecorating</b></p></div></center></div></div><div class="col-4" onclick="getGoal(2)"><div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;"><center><div class="card-body"><p class="card-text mt-4" id="cont_2"><b>I am Moving</b></p></div></center></div></div><div class="col-4" onclick="getGoal(3)"><div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;"><center><div class="card-body"><p class="card-text mt-4" id="cont_3"><b>I need help with a layout</b></p></div></center></div></div><div class="col-4" onclick="getGoal(4)"><div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;"><center><div class="card-body"><p class="card-text mt-4" id="cont_4"><b>I am looking for a species</b></p></div></center></div></div><div class="col-4" onclick="getGoal(5)"><div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;"><center><div class="card-body"><p class="card-text mt-4" id="cont_5"><b>I am moving with someone</b></p></div></center></div></div><div class="col-4" onclick="getGoal(6)"><div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;"><center><div class="card-body"><p class="card-text mt-4" id="cont_6"><b>Other</b></p></div></center></div></div></div><!--Loop ends--><a class="link mt-3"><u>Dont see your room?</u></a></p><div class="row mb-3"><div class="col-4 mr-5"><a href="/modsy/rooms/" class="previous" onClick="history.go(-1);">« Home</a></div><div class="col-4 ml-5"><a href="/modsy/furniture" class="next">Next »</a></div></div></div>Codepen code ishttps://codepen.io/lakshmi123__/pen/xxbzwNP