JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<ul class="posts">
  <li>Post 1</li>
  <li>Post 2</li>
  <li>Post 3</li>
  <li>Post 4</li>
  <li>Post 5</li>
  <li>Post 6</li>
  <li>Post 7</li>
  <li>Post 8</li>
  <li>Post 9</li>
</ul>

CSS

ul.posts{
 float: left;  
 padding: 10px;    
}

JavaScript

var postsArr = new Array(),
    $postsList = $('ul.posts');

//Create array of all posts in lists
$postsList.find('li').each(function(){
    postsArr.push($(this).html());
})

//Split the array at this point. The original array is altered.
var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
    secondList = postsArr,
    ListHTML = '';

function createHTML(list){
    ListHTML = '';
    for (var i = 0; i < list.length; i++) {
        ListHTML += '<li>' + list[i] + '</li>'
    };
}

//Generate HTML for first list
createHTML(firstList);
$postsList.html(ListHTML);

//Generate HTML for second list
createHTML(secondList);
//Create new list after original one
$postsList.after('<ul class="posts"></ul>').next().html(ListHTML);