Javascript Adds Same Class To Divs Without Calculating For Each Div

I have 2 coupons showing, they both have the .new-coupon when in fact one should say .new-coupon and one should say .old-coupon. It seems to apply the same class for every element

Solution 1:

if (days <= 7) {
   $('.couponDiv').addClass("old-coupon");
} elseif ((nowDateNew.getTime() - newOldDate.getTime()) < 0) {
   $('.couponDiv').addClass("new-coupon");
}

In your codes above, you had selected all of .couponDiv to add class old-coupon and once again you select all of .couponDiv to add class new-coupon. The conditions have no meaning here because with any matching you still add class for all elements.

You must separate which elements are belong to "old" and with elements are belong to "new". Then add the respectively class name.

Solution 2:

Is this what you need?

var startDate = $(this).find("#clockdiv .start").attr("rel"); //2018/09/28 17:00:00

Solution 3:

After some reconstructing and work with $this I was able to get this working:

$('.couponWrap .coupons li').each(function() {
    // Set the date we're counting down tovar deadlineYear = $(this).find("div .clockdiv .year").attr("rel");
    var deadlineMonth = $(this).find("div .clockdiv .month").attr("rel");
    var deadlineDay = $(this).find("div .clockdiv .days").attr("rel");
    var deadlineHour = $(this).find("div .clockdiv .hours").attr("rel");
    var deadlineMinute = $(this).find("div .clockdiv .minutes").attr("rel");
    var deadlineSecond = $(this).find("div .clockdiv .seconds").attr("rel");
    var couponExpired = $(this).find("div .clockdiv").attr("rel");

    var countDownDate = newDate(deadlineYear + "/" + deadlineMonth + "/" + deadlineDay + " " + deadlineHour + ":" + deadlineMinute + ":" + deadlineSecond).getTime();
    var startDate = newDate($(this).find("div .clockdiv .start").attr("rel"));

    var self = $(this);

    // Update the count down every 1 secondvar x = setInterval(function() {

      // Get todays date and timevar now = newDate().getTime();

      // Find the distance between now and the count down datevar distance = countDownDate - now;

      // Time calculations for days, hours, minutes and secondsvar days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Output the result in an element with id="demo"document.getElementById("days").innerHTML = days;
      document.getElementById("hours").innerHTML = hours;
      document.getElementById("minutes").innerHTML = minutes;
      document.getElementById("seconds").innerHTML= seconds;

      // If the count down is over, write some text if (distance < 0) {
        clearInterval(x);
        document.getElementById("clockdiv").innerHTML = "<p>" + couponExpired + "</p>";
      }

      //Works but only for 1st start date//var testDate = $("div .clockdiv .start").attr("rel"); //2018/09/28 17:00:00var startDateNew = newDate(startDate);
      var startDateNewer = newDate(startDate);
      var newOldDate = newDate(startDateNewer.setDate(startDateNew.getDate() + 7));

      //alert(startDate + ", " +  startDateNew + ", " + startDateNewer + ", " + newOldDate);//This works finevar nowDateNew = newDate().getTime();

      //alert(nowDateNew - newOldDate.getTime());if (days <= 7) {
        self.find('div.couponDiv').addClass("old-coupon");
      } elseif ((nowDateNew - newOldDate.getTime()) < 0) {
        self.find('div.couponDiv').addClass("new-coupon");
      }
    }, 1000);
  });