JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<a class="date"></a>
<a class="month-year"></a>
<a class="day-month"></a>
<a class="year"></a>
<a class="month"></a>
<a class="day"></a>
<br>
<a class="date"></a>
<a class="month-year"></a>
<a class="day-month"></a>
<a class="year"></a>
<a class="month"></a>
<a class="day"></a>
<br>
<a class="date"></a>
<a class="month-year"></a>
<a class="day-month"></a>
<a class="year"></a>
<a class="month"></a>
<a class="day"></a>

JavaScript

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];


var n = new Date();

let numElements = document.getElementsByClassName("date").length;

for (let i = 0; i < numElements; i++) {

  n.setDate(n.getDate()+100);

  var y = n.getFullYear();
  var m = n.getMonth();
  var d = n.getDate();

  var dateObject = document.getElementsByClassName("date")[i];
  if (dateObject) dateObject.textContent = d + " " + months[m] + " " + y;
  var month_year = document.getElementsByClassName("month-year")[i];
  if (month_year) month_year.textContent = months[m] + " " + y;
  var day_month = document.getElementsByClassName("day-month")[i];
  if (day_month) day_month.textContent = d + " " + months[m];
  var year = document.getElementsByClassName("year")[i];
  if (year) year.textContent = y;
  var month = document.getElementsByClassName("month")[i];
  if (month) month.textContent = months[m];
  var day = document.getElementsByClassName("day")[i];
  if (day) day.textContent = d;
}