JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div><span class="addclone">Add <i class="fa fa-plus-square" aria-hidden="true"></i></span></div>
<ul id="sortable_check">
  <li class="ui-state-default"><input type="text" class="textedit" name="" value="s1">

  <span class="delcont"><i class="fa fa-trash" aria-hidden="true"></i></span>
 
  </li>
  <li class="ui-state-default"><input type="text" class="textedit" name="" value="s2">
 
  <span class="delcont"><i class="fa fa-trash" aria-hidden="true"></i></span>
 
  </li>
  <li class="ui-state-default"><input type="text" class="textedit" name="" value="s3">
 
  <span class="delcont"><i class="fa fa-trash" aria-hidden="true"></i></span>

  </li>
 

</ul>
<ul class="sort">
<li><input type="checkbox" name="" value=""><label></label></li>
<li><input type="checkbox" name="" value=""><label></label></li>
<li><input type="checkbox" name="" value=""><label></label></li>

</ul>

JavaScript

$( function() {

var keyupfunction = function(){

$('#sortable_check').find('input.textedit').keyup(function(){
var inputindex = $(this).parent().index();
var optionval = $(this).val();
var optioncontent = $('.sort').find('label:eq('+inputindex+')');
optioncontent.html(optionval);
});	

}

var sortblefunction = function(){

$('#sortable_check').find('input.textedit').each(function(){
										
				var inputindex = $(this).parent().index();
										
										var optionval = $(this).val();
										
										var optioncontent = $('.sort').find('label:eq('+inputindex+')');
									
								
									optioncontent.html(optionval);
									keyupfunction();	
										
						
									});

}

$('.addclone').click(function(){
debugger;
$('#sortable_check').append('<li class="ui-state-default ui-sortable-handle"><input type="text" name="" class="textedit" value="s1"><span class="delcont"><i class="fa fa-trash" aria-hidden="true"></i></span></li>');

$('.sort').append('<li><input type="checkbox" name="" value=""><label></label></li>');


$('#sortable_check li .delcont').click(function(){
debugger;

if($(this).parent().index()>-1){
var list =  $(this).index()+1;


alert($(this).parent().index());
$(this).parent().remove();
var list34 = 2+list

$('.sort').find('li:eq('+list34+')').remove();
}
});


sortblefunction();


});



var deletefunction = function(){

$('#sortable_check li').find('.delcont').click(function(){
debugger;
 

var inputindex = $(this).parent().index();

var removeli = $(this).parent().remove();



alert(inputindex);

$('.sort').find('li:eq('+inputindex+')').remove();			

});
}



deletefunction();










$('#sortable_check li input.checkcont').change(function () {


if ($('input.checkcont').is(':checked')) {


var inputindex = $(this).parent().parent().index();

$('.sort').find('li input:eq('+inputindex+')').prop('checked',true);

alert(inputindex);



}

else{
var inputindex = $(this).parent().parent().index();
$('.sort').find('li...