JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menuContainer">
    <ul id="menu">
		<li><a href="#" id="addColumn">add Element (max 5)</a></li>
		<li><a href="#" id="addCard">---</a></li>
		<li><a href="#" id="delColumn">---</a></li>
		<li><a href="#" id="delCard">---</a></li>
		<li><a href="#" id="tblReset">---</a></li>
	</ul>
</div>
			
<div id="columns" style="width: 1000px;"></div>

CSS

#header {
	width:				1000px;
	height:				100px;
	background-color:	yellow;
	text-align:			center;
}

#menuContainer {
	background-color:	black;
	width:				1000px;
	height:				30px;
	font-size:			20px;
}

ul#menu {
	list-style:			none;
	padding:			0;
	margin:				0;
	width:				100%;
}

ul#menu li {
	display:			block;
	float:				left;
	width:				200px;
	margin:				0;
	padding:			0;
	text-align:			center;
	line-height:		30px;
}

ul#menu li a {
	display:			block;
	width:				100%;
	color:				lime;
	text-decoration:	none;
}

ul#menu li a:hover, ul#menu li#active a:hover {
	display:			block;
	width:				100%;
	color:				red;
	text-decoration:	none;
	line-height:		30px;
}

.column {
	width:				200px;
	background-color:	aqua;
	float:				left;
}

JavaScript

$(function() {
    var columns = $('.column').size();
				
	$('a#addColumn').click(function() {
	    if (columns < 5) {					
		var columnName = prompt('Внесете назив за колоната: ');
        var temp = columns + 1;
		$('<div class="column">' + columnName + '<button id="' + temp + '" style="float:right;" class="btnRemoveColumn">X</button></div>').appendTo('div#columns');
		columns++;
	}
	else { 
		alert("Имате максимален број на колони во таблата");
	}
});
				 
	$(".btnRemoveColumn").click(function(){
	    $(this).parent().remove();
	});				 
});