JSFiddle - React, Tailwind, and code Playground

by My Sunday

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul id="list">
  <li>
    <span>1</span> , 
    <p>Hello VN</p>
    <button class="dellist-item"><i class="fa fa-times-circle-o"></i></button>
  </li>
</ul>
<button id="add-more"><i class="fa fa-plus"></i> Add more</button>

CSS

ul{}
ul li{ list-style: none; margin-bottom: 10px; }
ul li p{ 
  display: inline-block; 
  vertical-align: middle; 
  margin: 0;
}

JavaScript

! ( function( $ ) {
  "use strict";
  
  /* DOM Ready */
  $( function() {
    /* set Variable */
    var $list = $( '#list' ),
        $Clone = $list.html();
    
    /* triggler Update Number */
    $list.on( 'updateNumber', function() {
      var $this = $( this );
      
      /* Check <li> exist */
      if( $this.children( 'li' ).length <= 0 ) 
        return;
      
      $this.children( 'li' ).each( function( ) {
        $( this ).children( 'span' ).html( $( this ).index() + 1 );
      } )
    } )
    
    /* Del item */
   	$list.on( 'click', '.dellist-item', function() {
      $( this ).parents( 'li' ).fadeOut( 500, function() {
        $( this ).remove();
        $list.trigger( 'updateNumber' );
      } )
    } )
    
    /* Add more */
    $( '#add-more' ).on( 'click', function() {
      $list.append( $Clone ).trigger( 'updateNumber' );
    } )
  } )
} )( jQuery )