JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js "></script>
<div id="paging1">
<ul class="list paging-items">
<li><!-- item -->
<h4>Due in <span class="days-due"></span> days</h4>
<h4><span class="due-date">11/01/2018</span></h4>
</li><!-- #item -->
<li><!-- item -->
<h4>Due in <span class="days-due"></span> days</h4>
<h4><span class="due-date">01/20/2017</span></h4>
</li><!-- #item -->
</ul>
</div>
JavaScript
// Count days due
function daysUntil(year, month, day) {
var now = new Date(),
dateEnd = new Date(year, month - 1, day), // months are zero-based
days = (dateEnd - now) / 1000/60/60/24; // convert milliseconds to days
return Math.round(days);
}
// Set days due
$('#paging1 ul li').each(function () {
var monthDue = $(this).find('.due-date').text().substr(0,2);
var dayDue = $(this).find('.due-date').text().substr(3,2);
var yearDue = $(this).find('.due-date').text().substr(6,4);
$(this).find('.days-due').text(daysUntil(yearDue, monthDue, dayDue));
});