JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="view_style">
  <li>1</li>
  <li>2 <ul>
   <li>1</li>
   <li>1</li>
   </ul>
  
  </ul></li>
  
</ul>
<button>Add New Element</button>

CSS

.active{
  background-color : yellow;
  color : red;
}

JavaScript

$('button').click(function() {
  var
    ul = $('.view_style'),
    li = ul.has('li').length ? ul.children().last().text() : 0;

  ul.append('<li>' + ( parseInt(li) + 1) + '</li>');
});

// without delegation
$('.view_style li').on('click',function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

// with delegation
$('.view_style').on('click','li',function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});