JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calendar">
    <div class="fc-header"></div>
    <div class="fc-content"></div>
    <div class="fc-header"></div>
    <div class="fc-content"></div>
    <div class="fc-header"></div>
    <div class="fc-content"></div>
</div>

JavaScript

var calendar = document.getElementById('calendar');
        var calendarChildren = calendar.children;
        var calendarHeaders = document.getElementsByClassName('fc-header');  
        var calendarBodies = document.getElementsByClassName('fc-content');
        var containerForCalendars1 = document.createElement("div");
        var containerForCalendars2 = document.createElement("div");
        var containerForCalendars3 = document.createElement("div");
        calendar.appendChild(containerForCalendars1);
        calendar.appendChild(containerForCalendars2);
        calendar.appendChild(containerForCalendars3);
        containerForCalendars1.appendChild(calendarHeaders[0]); 
        containerForCalendars1.appendChild(calendarBodies[0]);
        containerForCalendars2.appendChild(calendarHeaders[1]);
        containerForCalendars2.appendChild(calendarBodies[1]);
        containerForCalendars3.appendChild(calendarHeaders[2]);
        containerForCalendars3.appendChild(calendarBodies[2]);
console.log(calendar);