JSFiddle - React, Tailwind, and code Playground

by GlauberRocha

HTML

<p>Click anywhere in the blue block (initial markup)</p>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>

CSS

li {
    margin: 1px;
    width: 120px;
    background-color: #CCC;
}

ul {
    border: solid 1px blue;
}

ol {
    float: left;
    border: solid 1px red;
}

JavaScript

var nLines = function(n) {
    var ol, li;
    $("body").append("<ol/>"); // Add a new ordered list
    ol = $("ol:last");

    if ($("ul > li").length > n - 1) {
        li = $("ul > li:lt(" + n + ")").detach().appendTo(ol);
        nLines(n); // Recursive call (on the remaining list items)
    } else {
        li = $("ul > li").detach().appendTo(ol);
        $("ul").remove();
        return;
    }
};


$("ul").one("click", function() {
    nLines(6); // Initial function call
    $("p").html("Markup transformed");
});