JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.fc-header {
    font-weight:900;
}

JavaScript

// Set this jQuery to run once the page is ready.
$('document').ready(function() {
    // Create a list of all the headers & all the contents
    var headers = $('.fc-header');
    var contents = $('.fc-content');
    
    // Cycle through the headers & contents (assuming they're equal in length)
    for(i=0; i<headers.length; i++) {
        
        // Add a div to calendar with an id of the for iterator so we can 
        // access it.
        $('#calendar').append('<div id="' + i + '"></div>');
        
        // Access that div using the id we added, then append the i'th header
        // and the i'th content.
        $('#' + i).append(headers[i]);
        $('#' + i).append(contents[i]);
        
        // Remove the id as we don't need it later.
        $('#' + i).removeAttr('id');
    }
})