JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<div class='sort-wrap'>
  <ul id="sortable">
    <li id="1" class="ui-state-default ">
      <h5>1</h5>
    </li>
    <li id="2" class="ui-state-default ">
      <h5>2</h5>
    </li>
    <li id="3" class="ui-state-default ">
      <h5>3</h5>
    </li>
  </ul>
</div>
<label>Order:</label> <input type="text" id="order" />

CSS

#sortable {
  margin: 0;
  padding: 0;
}

#sortable li {
  list-style: none;
  margin: 0;
}

.sort-wrap {
  margin: 20px;
}

JavaScript

$(document).ready(function() {
  // get assets to display
  //var showid = < cfoutput > '#SESSION.Show#' < /cfoutput>;
  var showid = 10000000001;
  var html = "";

  function assetsPost() {
    $.ajax({
      cache: false,
      type: 'POST',
      url: '/echo/json/',
      dataType: "json",
      data: {
        show_id: showid,
        json: JSON.stringify([{
          'linkID': 4,
          'description': "stuff",
          'discussion': "thread",
          'linkurl': "http://www.example.com/"
        }])
      },
      success: function(data) {
        console.log(data);
        if (data && data.length) { // DO SOMETHING 

          //html += "<ul id='sortable'>";
          var html = "";

          $.each(data, function(i, val) {
            var linkID = data[i].linkID;
            var description = data[i].description;
            var discussion = data[i].discussion;
            var linkurl = data[i].linkurl;
            var index = $("#sortable li").length + 1;
            html += "<li id='" + index + "' class='ui-state-default'>";
            html += "<h5 style='color:#000; text-align:left;'>";
            html += "<a class='process-asset' id='" + linkID + "' name='done'><img src='images/icon_done.png'></a>";
            html += "<a href='" + linkurl + "' target='_blank'>" + description + "</a>";
            html += "<a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'><img src='images/icon_remove.png'></a>";
            html += "</h5>";
            html += "<p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'> " + discussion + "</p>";
            html += "</li>";
          });
          //html += "</ul>";
          console.log(html);

          $('#sortable').append(html);
          $("#order").val($("#sortable").sortable('toArray'));
          //alert(html);
        } else { // DO SOMETHING 
        }
      }
    });
  }
  assetsPost();

  $("#sortable").sortable({
    opacity: 0.6,
    update:...