JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<nav>
    <ul>
        <li><a>nav1</a>
        </li>
        <li><a>nav2</a>
        </li>
        <li><a>nav3</a>
        </li>
    </ul>
</nav>

JavaScript

var length = $('nav li a').length;
$('nav li a').each(function(i,e){  
    var section;
    $(this).attr('href','#id'+(i+1)); 
    
    section = $('<section/>',{
        class : 'main-section',
        id : 'id'+(i+1),
        text : 'section-'+(i+1)
    });
    if ( $('nav').next().is('section') ) {
         $(section).insertAfter($('nav').nextAll().last());
    } else {
        $(section).insertAfter('nav');
    }
   
});