check whether the button is clicked do something else do nothing

Question

I have created a function for users to select a time slot and get discount on the basis of selected time but now the problem is when ever user selects the first and then selects the second option the amount keeps getting deducted instead of recalculating from the original price instead of decremented the price

here is my working code

 $(document).ready(function(e) { $('.time-slot').on('click', function() { $('.time-slot').removeClass('active1'); $(this).addClass('active1'); var dt_time = $(this).attr('data-dt-time'); var time_off = $(this).attr('data-timeoff'); var cost = $('.price').val(); if(time_off !== undefined) { if($('.time-slot').hasClass('active1')) { var subtr = parseInt(cost) / 100 * parseInt(time_off); var subtotal = parseInt(cost) - subtr; $('.price').val(subtotal); } else { var subtr = parseInt(cost) / 100 * parseInt(time_off); var subtotal = parseInt(cost) + subtr; $('.price').val(subtotal); } } }); }); 

 li { cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul> <li class="time-slot" data-dt-time="08:00" data-timeoff="10">08:00</li> <li class="time-slot" data-dt-time="08:30" data-timeoff="15">08:30</li> <li class="time-slot" data-dt-time="09:00" data-timeoff="10">09:00</li> <li class="time-slot" data-dt-time="09:30" data-timeoff="20">09:30</li> <li class="time-slot" data-dt-time="10:00" data-timeoff="10">10:00</li> </ul> <input type="text" class="price" value="350" /> 

Answer 1

I get your solution you are overriding the value of price class. i used a new input class name originalPrice in this. i get price of origin cost from originalPrice and send it to price and perform your actions what you want

 $(document).ready(function(e) { $('.time-slot').on('click', function() { $('.time-slot').removeClass('active1'); $(this).addClass('active1'); var dt_time = $(this).attr('data-dt-time'); var time_off = $(this).attr('data-timeoff'); var cost = $('.originalPrice').val(); if (time_off !== undefined) { if ($('.time-slot').hasClass('active1')) { var subtr = parseInt(cost) / 100 * parseInt(time_off); var subtotal = parseInt(cost) - subtr; $('.price').val(subtotal); } else { var subtr = parseInt(cost) / 100 * parseInt(time_off); var subtotal = parseInt(cost) + subtr; $('.price').val(subtotal); } } }); }); 

 li { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul> <li class="time-slot" data-dt-time="08:00" data-timeoff="10">08:00</li> <li class="time-slot" data-dt-time="08:30" data-timeoff="15">08:30</li> <li class="time-slot" data-dt-time="09:00" data-timeoff="10">09:00</li> <li class="time-slot" data-dt-time="09:30" data-timeoff="20">09:30</li> <li class="time-slot" data-dt-time="10:00" data-timeoff="10">10:00</li> </ul> <input type="text" class="originalPrice" value="350" /> <input type="text" class="price" value="350" /> 

Answer 2

Right after the line

$(document).ready(function(e) {

add a variable declaration

var cost = 350 

and use that in your calculations rather than picking up the cost directly from the price field.