JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="boxes">

    <h2 data-mt="Something">Something about something</h2>
    
    <h2 data-mt="Something else">Something about something else</h2>
    
</div>

CSS

body { margin: 20px; }

#boxes > div {
   	float: left;
    clear: both;
    border: 1px solid #e1e1e1;
}

JavaScript

$(document).ready(function() {

    var container = $('#boxes'),
	title = container.find('h2');
    
    title.each(function() {
        
    	var obj = $(this),
			objD = obj.data();
        
        $('<div class="HMenu" />').appendTo( container );

		$('<div class="hm_'+ obj.index() +'">'+ objD.mt +'</div>').appendTo( container.find('HMenu') );
        
    });

});