JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">

<ul id="main"></ul>

<div id="odds">
   <div>This is the first paragraph anything can be inside it.</div>
  <div>This is the third paragraph anything can be inside it.</div>
  <div>This is the fifth paragraph anything can be inside it.</div>
  <div>This is the seventh paragraph anything can be inside it.</div>
</div>
<div id="evens">
 <div>This is the second paragraph anything can be inside it.</div>
  <div>This is the fourth paragraph anything can be inside it.</div>
  <div>This is the sixth paragraph anything can be inside it.</div>
</div>
</div>

JavaScript

$(function(){
    $('#odds div').each(function(i,v){
       var splitDiv = $('#evens div').eq(i).appendTo(this);
 $('#header ul').append(
    $('<li>').append(
        $('<a>').attr('href','#').append(
            $('<span>').append(v)
)));    
       //console.log(i);
      // console.log(this);
       
       
        
    }); 
});