JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="container">
<button id="a">remove</button><button id="b">attach</button>
<ul>
</ul>
</div>

CSS

.currentpage{
		color:red;
		font-weight:bold;
		font-size:16px;
	}

JavaScript

var k = 10;	
		myfunction(k);	
			$('#a').click(function(){	
				$('ul li').remove();	
			});			
			$('#b').click(function(){				
				k = 20;
				$('ul li').remove();
                myfunction(k);			
                
                BindMyList();
			});		
			BindMyList();

function myfunction(p){
	for(var i=0;i<p;i++){
		$('#container ul').append('<li id=lit'+i+'>Hello'+i+'</li>')
	}
}

function BindMyList()
{
    $('ul li').unbind('on');
    $('ul li').on('mouseenter',function () {
                var num = $(this).index();
                $('#lit' + num).addClass('currentpage');
                $('#lit' + num).siblings().removeClass('currentpage');
                });
}