JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="connections">

    <ol id="dynamiclist">
        <li><input type="text"/> <i class="fa fa-trash"></i></li>
    </ol>

   <button class="addMore"><i class="fa fa-plus"></i> Add</button>

</div>

JavaScript

$(document).ready(function(){
    
    jQuery("#connections #dynamiclist").sortable({
        axis: "y",
        connectWith: "#connections #dynamiclist",
        containment: "parent",
        items: "> li",
        cursor: "move",
        forceHelperSize: true
    });
            
        
    jQuery(document).on('click', '#connections .addMore', function () {
        
        jQuery("#connections ol").css("text-transform", "uppercase").append('<li>' + $("#connections .addMore").prev("input[type='text']").val() + ' <i class="fa fa-trash"></i></li>');
        
        jQuery("#connections .addMore").prev("input[type='text']").val("");
        
        jQuery("#connections #dynamiclist").sortable({
            connectWith: "#connections #dynamiclist"
        });
    });
    
    
    jQuery(document).on('click', '#connections #dynamiclist .fa-trash', function () {
    
        jQuery(this).parent().effect("fade", {}, 200, function () {
             jQuery(this).remove();
             jQuery("#connections #dynamiclist").sortable({
                connectWith: "#connections #dynamiclist"
             });
        });
           
    
    });

});