How to reset jQuery after on click action - html

Question

I'm creating a simple survey using jQuery where if user rates 3 stars or below, one div is opened. But if user rating is 4 or 5 stars, another div opens.
Everything works fine if you make a direct rating, for example, you select 3 stars and click "Submit".
However, if you select 3 stars, but then change your mind and select 4 stars, both div's are shown.
It's like the browser is remembering my last choice. Is there any way to reset behavior after initial selection?
I have a full example of my code here at CodePen https://codepen.io/mario-smode/pen/YzqdzMv
(function($) {
$('#stars li').on('mouseover', function(){
var onStar = parseInt($(this).data('value'), 10); //
$(this).parent().children('li.star').each(function(e){
if (e < onStar) {
$(this).addClass('hover');
}
else {
$(this).removeClass('hover');
}
});
}).on('mouseout', function(){
$(this).parent().children('li.star').each(function(e){
$(this).removeClass('hover');
});
});
/* 2. Action to perform on click */
$('#stars li').on('click', function(){
var onStar = parseInt($(this).data('value'), 10); // The star currently selected
var stars = $(this).parent().children('li.star');
for (i = 0; i < stars.length; i++) {
$(stars[i]).removeClass('selected');
}
for (i = 0; i < onStar; i++) {
$(stars[i]).addClass('selected');
}
});
$('.choice').on('click', function () {
var $this = $(this);
$('.reaction').removeClass('reaction-fade-in');
$('.emoji').removeClass('emoji-selected');
$this.find('.reaction').addClass('reaction-fade-in');
$this.find('.emoji').addClass('emoji-selected');
});
$('#question-1 .choice').on('click', function() {
var ranking1 = $(this).attr('data-value');
$('.answer-submit').on('click', function() {
sessionStorage.setItem('ranking1', ranking1);
$('#question-1').addClass('hide');
$('.summary').removeClass('hide');
var total;
function calculateTotal() {
var ranking1 = sessionStorage.getItem('ranking1');
var total = parseInt(ranking1) + 0;
if (total >= 4 ) {
$('.amazing').removeClass('hide');
} else if ((total < 4) && (total = 3 )) {
$('#terrible').removeClass('hide');
} else {
$('#terrible').removeClass('hide');
}
}
calculateTotal();
});
});
})( jQuery );
.leave-review-btn {
display: block;
background-color: #de531e;
width: 240px;
padding: 10px 20px;
border-radius: 25px;
color: #fff;
margin: 0 auto;
}
.review-left, .review-right {
display: block;
width: 50%;
float: left;
border: 1px solid #e8e8e8;
padding-bottom: 15px;
margin-bottom: 10px;
}
.review-logo {
padding-top: 40px;
}
.review-logo svg {
max-width: 200px;
height: 100px;
}
h3 {
font-weight: 300;
}
.question h1 {
text-align: center;
}
.em, .em-svg {
height: 3.5em !important;
width: 3.5em !important;
}
.button {
padding: 1rem;
color: white;
background: black;
text-decoration: none;
text-transform: uppercase;
display: block;
margin: 0 auto;
width: fit-content;
}
.hide {
display: none;
}
.emoji-choices {
list-style: none;
text-align: center;
padding: 0px 0 23px 0em !important;
}
#media (max-width: 899px) {
li.choice {
list-style: none;
}
.emoji-choices {
display: flex;
margin-top: 40px;
}
.review-left, .review-right {
display: block;
width: 100%;
float: left;
border: 1px solid #e8e8e8;
padding-bottom: 15px;
margin-bottom: 10px;
}
}
#media (min-width: 900px) {
.emoji-choices {
display: -webkit-box;
display: flex;
max-width: 500px;
margin: auto;
}
}
#media (min-width: 900px) {
.choice {
width: 30vw;
margin-top: 3rem;
list-style: none;
}
}
.emoji {
font-size: 1.5rem;
-webkit-transition: font-size 300ms ease;
transition: font-size 300ms ease;
cursor: pointer;
margin: 0;
}
.emoji-selected {
font-size: 2rem;
}
.reaction {
font-size: 1rem;
opacity: 0;
}
.reaction-fade-in {
-webkit-animation: fadeIn 300ms ease;
animation: fadeIn 300ms ease;
opacity: 1;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.question {
margin-top: 1rem;
}
.summary {
text-align: center;
margin: auto;
max-width: 800px;
}
/* stars - remove to use smiley */
.rating-stars ul > li.star {
display: inline-block;
}
/* Idle State of the stars */
.rating-stars ul > li.star > p > i.fa {
font-size: 2.5em; /* Change the size of the stars */
color: #ccc; /* Color on idle state */
}
/* Hover state of the stars */
.rating-stars ul > li.star.hover > p > i.fa {
color: #ffcc36;
}
/* Selected state of the stars */
.rating-stars ul > li.star.selected > p > i.fa {
color: #ff912c;
}
.rating-stars ul {
list-style-type: none;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
}
.rating-stars fa {
font-size: 2.5em;
color: #ccc;
}
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" integrity="sha512-i8+QythOYyQke6XbStjt9T4yQHhhM+9Y9yTY1fOxoDQwsQpKMEpIoSQZ8mVomtnVCf9PBvoQDnKl06gGOOD19Q==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<!-- Q1-->
<div id="question-1">
<div class="question rating-stars text-center">
<h1>How was your overall experience?</h1>
</div>
<div class="rating-stars text-center">
<ul class="emoji-choices" id="stars">
<li class="choice star" data-value="1">
<p class="emoji"><i class='fa fa-star fa-fw'></i></p>
<p class="reaction">I can't believe I wasted money on this!</p>
</li>
<li class="choice star" data-value="2">
<p class="emoji"><i class='fa fa-star fa-fw'></i></p>
<p class="reaction">I had such high hopes, but ultimately it was disappointing</p>
</li>
<li class="choice star" data-value="3">
<p class="emoji"><i class='fa fa-star fa-fw'></i></p>
<p class="reaction">Meh. I could take it or leave it</p>
</li>
<li class="choice star" data-value="4">
<p class="emoji"><i class='fa fa-star fa-fw'></i></p>
<p class="reaction">Thanks! I really enjoyed it.</p>
</li>
<li class="choice star" data-value="5">
<p class="emoji"><i class='fa fa-star fa-fw'></i></p>
<p class="reaction">I can't wait to tell everyone I know about this!</p>
</li>
</ul>
</div>
<a class="answer-submit button" href="#">Submit Answer</a>
</div>
<!-- Thank you-->
<div class="summary hide">
<h2>Thanks for taking our survey! Your feedback helps us make better products.</h2>
<div class="hide amazing">
<h3>We are SO happy that you enjoyed your experience with our product! Please share it with everyone you know!</h3>
<div class="review-logo">
<div class="review-left">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="266" height="100" viewBox="0 0 266 100" overflow="visible" enable-background="new 0 0 266 100" xml:space="preserve">
<g>
<rect fill="#3B5998" width="266" height="100"/>
</g>
<g>
<path fill="#FFFFFF" d="M140.0205078,49.5966797c-1.7841797,0-3.0703125,0.5849609-4.3740234,1.1811523v13.4858398 c1.2490234,0.1191406,1.9648438,0.1191406,3.1503906,0.1191406c4.2822266,0,4.8691406-1.9609375,4.8691406-4.6992188v-6.4414062 C143.6660156,51.2207031,142.9951172,49.5966797,140.0205078,49.5966797z M111.5825195,48.8608398 c-2.9707031,0-3.6494141,1.6313477-3.6494141,3.6508789v1.1347656h7.2944336v-1.1347656 C115.2275391,50.4921875,114.5498047,48.8608398,111.5825195,48.8608398z M56.4926758,62.8984375 c0,1.5976562,0.7539062,2.4277344,2.4179688,2.4277344c1.7851562,0,2.8417969-0.5820312,4.1445312-1.1796875v-3.1992188 h-3.9033203C57.3046875,60.9472656,56.4926758,61.2910156,56.4926758,62.8984375z M167.6835938,49.5966797 c-2.9755859,0-4.0068359,1.6240234-4.0068359,3.6455078v7.3789062c0,2.0273438,1.03125,3.65625,4.0068359,3.65625 c2.9677734,0,4.0068359-1.6289062,4.0068359-3.65625v-7.3789062 C171.6904297,51.2207031,170.6513672,49.5966797,167.6835938,49.5966797z M41.9091797,71.171875h-8.7475586V49.9975586h-4.371582 v-7.2963867h4.371582v-4.3808594c0-5.9526367,2.4672852-9.4921875,9.4790039-9.4921875h5.8378906v7.2978516h-3.6489258 c-2.7299805,0-2.909668,1.0195312-2.909668,2.9228516l-0.0107422,3.6523438h6.6103516l-0.7734375,7.2963867h-5.8369141V71.171875 z M71.8061523,71.2265625H64.515625l-0.315918-1.84375c-3.3291016,1.84375-6.300293,2.1425781-8.2602539,2.1425781 c-5.3466797,0-8.1933594-3.5722656-8.1933594-8.5117188c0-5.828125,3.3208008-7.9082031,9.262207-7.9082031h6.046875v-1.2597656 c0-2.9741211-0.3408203-3.8481445-4.9155273-3.8481445H50.659668l0.7314453-7.2963867h8.1762695 c10.0380859,0,12.2387695,3.1708984,12.2387695,11.203125V71.2265625z M96.5991211,50.5327148 c-4.5371094-0.7773438-5.8398438-0.9482422-8.0229492-0.9482422c-3.9213867,0-5.1064453,0.8652344-5.1064453,4.1948242v6.2988281 c0,3.3300781,1.1850586,4.1992188,5.1064453,4.1992188c2.1831055,0,3.4858398-0.1738281,8.0229492-0.9550781v7.1171875 c-3.9741211,0.890625-6.5629883,1.125-8.7514648,1.125c-9.3920898,0-13.1254883-4.9394531-13.1254883-12.0742188v-5.1113281 c0-7.1411133,3.7333984-12.0888672,13.1254883-12.0888672c2.1884766,0,4.7773438,0.2353516,8.7514648,1.1298828V50.5327148z M123.9750977,59.4902344h-16.0419922v0.5878906c0,3.3300781,1.1860352,4.1992188,5.1064453,4.1992188 c3.5244141,0,5.675293-0.1738281,10.2041016-0.9550781v7.1171875c-4.3676758,0.890625-6.6435547,1.125-10.9291992,1.125 c-9.3925781,0-13.1279297-4.9394531-13.1279297-12.0742188v-5.84375c0-6.2426758,2.7714844-11.3564453,12.3959961-11.3564453 s12.3925781,5.0541992,12.3925781,11.3564453V59.4902344z M152.4121094,59.625 c0,6.8964844-1.9707031,11.9257812-13.9111328,11.9257812c-4.3115234,0-6.8408203-0.3789062-11.5996094-1.1113281V31.019043 l8.7451172-1.4594727v13.7890625c1.8896484-0.7021484,4.3359375-1.0585938,6.5625-1.0585938 c8.7460938,0,10.203125,3.9208984,10.203125,10.2216797V59.625z M180.4453125,59.7753906 c0,5.9492188-2.4560547,11.71875-12.7324219,11.71875c-10.28125,0-12.7832031-5.7695312-12.7832031-11.71875V54.03125 c0-5.9521484,2.5019531-11.7226562,12.7832031-11.7226562c10.2763672,0,12.7324219,5.7705078,12.7324219,11.7226562V59.7753906z M208.4589844,59.7753906c0,5.9492188-2.4589844,11.71875-12.7333984,11.71875 c-10.28125,0-12.7832031-5.7695312-12.7832031-11.71875V54.03125c0-5.9521484,2.5019531-11.7226562,12.7832031-11.7226562 c10.2744141,0,12.7333984,5.7705078,12.7333984,11.7226562V59.7753906z M237.2080078,71.171875h-9.4794922l-8.0166016-13.3828125 V71.171875h-8.7480469V31.019043l8.7480469-1.4594727v25.8486328l8.0166016-12.7070312h9.4794922l-8.7519531,13.8671875 L237.2080078,71.171875z M195.6962891,49.5966797c-2.9707031,0-4.0019531,1.6240234-4.0019531,3.6455078v7.3789062 c0,2.0273438,1.03125,3.65625,4.0019531,3.65625c2.9667969,0,4.0166016-1.6289062,4.0166016-3.65625v-7.3789062 C199.7128906,51.2207031,198.6630859,49.5966797,195.6962891,49.5966797z"/>
<path fill="#FFFFFF" d="M242.2011719,66.1777344c1.4726562,0,2.6464844,1.2011719,2.6464844,2.7011719 c0,1.5234375-1.1738281,2.7109375-2.6572266,2.7109375c-1.4755859,0-2.6728516-1.1875-2.6728516-2.7109375 c0-1.5,1.1972656-2.7011719,2.6728516-2.7011719H242.2011719z M242.1904297,66.5976562 c-1.1865234,0-2.1582031,1.0214844-2.1582031,2.28125c0,1.2832031,0.9716797,2.2910156,2.1689453,2.2910156 c1.1982422,0.0117188,2.1552734-1.0078125,2.1552734-2.2792969s-0.9570312-2.2929688-2.1552734-2.2929688H242.1904297z M241.6865234,70.4511719h-0.4804688V67.4375c0.2519531-0.0351562,0.4921875-0.0703125,0.8515625-0.0703125 c0.4560547,0,0.7539062,0.0957031,0.9365234,0.2265625c0.1767578,0.1328125,0.2724609,0.3359375,0.2724609,0.6230469 c0,0.3984375-0.2617188,0.6367188-0.5849609,0.734375v0.0234375c0.2626953,0.0488281,0.4423828,0.2871094,0.5029297,0.7304688 c0.0703125,0.46875,0.1425781,0.6484375,0.1904297,0.7460938h-0.5029297 c-0.0712891-0.0976562-0.1435547-0.3730469-0.2041016-0.7695312c-0.0703125-0.3828125-0.2636719-0.5273438-0.6484375-0.5273438 h-0.3330078V70.4511719z M241.6865234,68.7832031h0.3476562c0.3935547,0,0.7285156-0.1445312,0.7285156-0.5175781 c0-0.2636719-0.1904297-0.5273438-0.7285156-0.5273438c-0.1572266,0-0.265625,0.0117188-0.3476562,0.0234375V68.7832031z"/>
</g>
</svg>
<!-- FACEBOOK LINK-->
Leave A Review
</div>
<div class="review-right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="272" height="92">
<path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
<path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
<path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
<path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
</svg>
<!-- GOOGLE LINK -->
Leave A Review
</div>
</div>
</div>
<div class="hide" id="terrible"><h3>We're sorry that you had such a terrible experience with our product. As hard as it is to swallow a bitter pill, we appreciate your feedback and will look into how we can improve the areas you shared with us. We're always improving and hope you'll give our product another try in the future.</h3>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</div>
How can I fix this behavior? Thanks

Answer 1

You can take the Submit Answer Button Handler out of the "#question .choice" click handler.
var ranking1 = 0;
$('#question-1 .choice').on('click', function () {
ranking1 = $(this).attr('data-value');
});
$('.answer-submit').on('click', function () {
console.log(ranking1)
sessionStorage.setItem('ranking1', ranking1);
$('#question-1').addClass('hide');
$('.summary').removeClass('hide');
var total;
function calculateTotal() {
var ranking1 = sessionStorage.getItem('ranking1');
var total = parseInt(ranking1) + 0;
if (total >= 4) {
$('.amazing').removeClass('hide');
} else if ((total < 4) && (total = 3)) {
$('#terrible').removeClass('hide');
} else {
$('#terrible').removeClass('hide');
}
}
calculateTotal();
});
Let me know if you still face any issue.