JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.issocial.net/css/style.css">
<script src="http://www.issocial.net/js/jquery-1.5.1.min.js"></script>
<script src="http://www.issocial.net/jquery-ui-1.8.13.custom.min.js"></script>
<link rel="stylesheet" href="http://www.issocial.net/css/ui-lightness/jquery-ui-1.8.13.custom.css">
<div id="dash-wrapper">
    <ul id="sortable">
        <li class="ui-state-default"><img src="images/social/twitter.png" class="social-icon" /> <input type="text" value="textt" name="user-media-link[]" class="user-media-link"><input type="hidden" name="social-media-type" value="1"><img src="images/drag.png" class="drag-cursor"></li>
        <li class="ui-state-default"><img src="images/social/facebook.png" class="social-icon" /> <input type="text" value="textt" name="user-media-link[]"><input type="hidden" name="social-media-type" value="1"><img src="images/drag.png" class="drag-cursor"></li>
        <li class="ui-state-default"><img src="images/social/rss.png" class="social-icon" /> <input type="text" value="textt" name="user-media-link[]"><input type="hidden" name="social-media-type" value="1"><img src="images/drag.png" class="drag-cursor"></li>
        
    </ul>
    <div class="ui-state-default" onCLick="addNewSocial(); return false;" id="add">ADD</div>
</div>

CSS

#sortable{
    width : 550px;
    display: inline-block;
}
#sortable li, #add {
    width : 550px;
    margin : 5px;
    padding : 5px;
    height : 50px;
}
#sortable li img.social-icon, #sortable li img.drag-cursor {
    width: 40px;
    height : 40px;
    float : left;
}
#sortable li img.social-icon {
    margin-right : 5px;
}
#sortable li img.drag-cursor {
    margin-left : 5px;
    cursor : move;
}
#sortable li input {
    height:40px;
    width:450px;
    line-height: 45px;
    float:left;
}
#add {
    cursor : pointer;
    text-align: center;
    line-height: 45px;
}
.ui-state-highlight { height: 50px; line-height: 50px; }

JavaScript

$(function() {
    $("#sortable").sortable({
       
    });
});

function addNewSocial() {
    $("#sortable").append('<li class="ui-state-default"><img src="" width="100" height="100" /> <input type="text" value="textt" name="user-media-link[]"><input type="hidden" name="social-media-type" value="1"></li>');
}