JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/black-tie/jquery-ui.css">
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<ul id='myList'>
    <!-- some db data -->
    <li>db1</li>
    <li>db2</li>
    <li>db3</li>
</ul>
<input type='text' id='stuff'/><button id='addStuff'>Add Something</button>

JavaScript

$(document).ready(function() {
    //Some code
    $("#myList").sortable();
    //Some more code
    $("#addStuff").click(function(e) {
        e.preventDefault();
        var itemSelector = $("#myList li"),
            items = [],
            dataObj = {};
        $.each(itemSelector, function(i, v) {
            items.push($(v).text());
        });
        items.push($("#stuff").val());
        dataObj.stuff = items;
        $.ajax({
            url: '/echo/json/',
            data: {
                json: JSON.stringify(dataObj)
            },
            success: function(data) {
                $("#myList").empty();
                $.each(data.stuff, function(k, v) {
                    $("#myList").append("<li>" + v + "</li>");
                })
            },
            type: 'POST',
            datatype: 'json',
            cache: false
        });
        $("#stuff").val("").focus();
    });
});