JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab_space">
    <ul id="tabs_menu_n1" class="nav nav-tabs tabs_menu_n1 tab_body">
        <li><a class="current" href="#M_n1">mai</a>

        </li>
        <li><a href="#R_n1">red</a>

        </li>
        <li id="hn1"><a href="#H1_n1">hor</a>

        </li>
        <li id="pbtn"><a href="#+">+</a>

        </li>
    </ul>
</div>
<div id="tab_n1" class="tab_n1">
    <div class="tab_content_n1" id="M_n1">mai</div>
    <div class="tab_content_n1" id="R_n1">red</div>
    <div class="tab_content_n1" id="H1_n1">hor</div>
</div>

CSS

.tab_content_n1 {
    display: none;
}
#M_n1 {
    display: block;
}

JavaScript

var x = 2;
var original = document.getElementById('H1_n1');

function add_rec() {
    var i = x++;
    var mdiv = document.getElementById("tab_n1");
    var div = document.createElement("div");
    div.setAttribute('class', 'tab_content_n1')
    div.setAttribute('id', 'H1_n' + i)
    div.textContent = '\nHello world.'+i+'\n';
    mdiv.appendChild(div);

    var ul = document.getElementById("tabs_menu_n1");
    var li = document.createElement("li");
    var a = document.createElement("a");
    a.textContent = "H" + i;
    a.setAttribute('href', "#H1_n" + i);
    li.setAttribute('id', "hn" + i);
    li.appendChild(a);
    ul.appendChild(li);
    $('#tabs_menu_n1').append($('#pbtn'))
}

$(document).on('click', ".tabs_menu_n1 a", function (e) {
    var tab = $(this).attr("href");
    if (tab == "#+") add_rec()
    else{
        e.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        $(this).closest('li').addClass("active");
        $(this).closest('li').siblings().removeClass("active");
        var tab = $(this).attr("href");
        $(".tab_content_n1").not(tab).css("display", "none");
        $(tab).fadeIn();
    }
});