'click' event only fires on first click and not second

Question

I have five elements and want something to happend when I click one of them. My code works fine when clicking for first time, but the event never hits on second click. Any idea why?

 $("#ratingModal").find(".star.clickable").on("click", function () { console.log("click"); var $wrap = $(this).closest(".stars"); var count = parseInt($(this).data("star")); $.each($wrap.find(".star"), function ($index, $itm) { let current = parseInt($($itm).data("star")); $($itm).removeClass("fas"); $($itm).removeClass("far"); console.log(current); if (current <= count) { $($itm).addClass("fas"); console.log("fas"); } else { $($itm).addClass("far"); console.log("far"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="ratingModal"> <div class="body"> <div class="score-wrap"> <span class="label">Score: </span> <div class="stars"> <i class="fas fa-star clickable star star-1" title="1" data-star="1"></i> <i class="far fa-star clickable star star-2" title="2" data-star="2"></i> <i class="far fa-star clickable star star-3" title="3" data-star="3"></i> <i class="far fa-star clickable star star-4" title="4" data-star="4"></i> <i class="far fa-star clickable star star-5" title="5" data-star="5"></i> </div> </div> </div> </div> 

Answer 1

Try Using off().on('...') function

 $("#ratingModal").find(".star.clickable").off().on("click", function () { console.log("click"); var $wrap = $(this).closest(".stars"); var count = parseInt($(this).data("star")); $.each($wrap.find(".star"), function ($index, $itm) { let current = parseInt($($itm).data("star")); $($itm).removeClass("fas"); $($itm).removeClass("far"); console.log(current); if (current <= count) { $($itm).addClass("fas"); console.log("fas"); } else { $($itm).addClass("far"); console.log("far"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="ratingModal"> <div class="body"> <div class="score-wrap"> <span class="label">Score: </span> <div class="stars"> <i class="fas fa-star clickable star star-1" title="1" data-star="1"></i> <i class="far fa-star clickable star star-2" title="2" data-star="2"></i> <i class="far fa-star clickable star star-3" title="3" data-star="3"></i> <i class="far fa-star clickable star star-4" title="4" data-star="4"></i> <i class="far fa-star clickable star star-5" title="5" data-star="5"></i> </div> </div> </div> </div>