JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="cbp-category-link-w">
	<a href="#" class="cbp-column-title nav-link cbp-category-title">Holztiger Figures</a>
	<ul class="cbp-links cbp-category-tree">
		<li><div class="cbp-category-link-w"><a href="#">Wildlife</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Farm Theme</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Woodland &amp; Meadow</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Plants</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Dinosaurs</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Sets, Boxes and Packs</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Sea Creatures</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Castle Characters</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Nativity &amp; Christmas</a></div></li>
	</ul>
</div>

CSS

.cbp-category-link-w {
		display: block;
		width: 200px;
    background: #ccc;
	}
	.cbp-category-link-w ul{
		display: inline-block;
		width: 100;
		margin: 0;
		padding: 0;
    list-style: none;
	}
	.cbp-category-link-w ul li{
		
		float: left;
		width: 100%;
		list-style: none;
    color: #ff0;
	}
  .cbp-category-link-w ul li a{
    color: red;
	}

JavaScript

$(document).ready(function () {
	var moreHTML = '<li class="test">More</li>';
		$('.cbp-category-link-w > .cbp-links.cbp-category-tree').each(function(){
   	i = 0;
   	$(this).children('li').each(function(){
   	i++;
   	if(i == 3){
   
   	$( moreHTML ).insertBefore(this);}

   });
   
});
  
});