JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<div class="full">
    <div class="col">
        <ul>
            <li>Big Menu1
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                </ul>
            </li>
            <li>Big Menu 2
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                </ul>
            </li>
            <li>Big Menu 3
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                </ul>
            </li>
            <li>Big Menu 4</li>
            <li>Big Menu 5
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                </ul>
            </li>
            <li>Big Menu 6
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

.col{
    border:green 1px solid;
}
ul{
    border:blue 1px solid;
}

JavaScript

$m2 = $("li:contains('Big Menu 2')")
$m3 = $("li:contains('Big Menu 3')")
$m4 = $("li:contains('Big Menu 4')")
$m5 = $("li:contains('Big Menu 5')")
$m6 = $("li:contains('Big Menu 6')")
$(".full").append("<div class='col'><ul></ul></div>");
$("ul:last").append($m2).append($m5);
$(".full").append("<div class='col'><ul></ul></div>");
$("ul:last").append($m3).append($m6);