JSFiddle - React, Tailwind, and code Playground

by agapetos

HTML

<ul id="sortable1" class="connectedSortable" style="background:#ddf;height:400px;width:145px;padding-top:5px">
	<li class="dugme1" id="a1" title="aa1">Item 1<input type="number" value="1" min="1" name="aaa1" id="aaa1" style="width:34px;float:right"/></li>
	<li class="dugme1" id="a2" title="aa2">Item 2<input type="text" value="1" min="1" name="aaa2" id="aaa2" style="width:34px;float:right" /></li>
</ul>
 
<ul id="sortable2" class="connectedSortable" style="background:#fdd;height:400px;width:145px;padding-top:5px">
	<li class="dugme2" id="b1" title="bb1">Item 1<input type="number" value="1" min="1" name="bbb1" id="bbb1" style="width:34px;float:right" /></li>
	<li class="dugme2" id="b2" title="bb2">Item 2<input type="number" value="1" min="1" name="bbb2" id="bbb2" style="width:34px;float:right" /></li>
</ul>

<ul id="sortable3" class="connectedSortable" style="background:#dfd;height:400px;width:145px;padding-top:5px">
	<li class="dugme3" id="c1" title="cc1">Item 1<input type="number" value="1" min="1" name="ccc1" id="ccc1" style="width:34px;float:right" /></li>
	<li class="dugme3" id="c2" title="cc2">Item 2<input type="number" value="1" min="1" name="ccc2" id="ccc2" style="width:34px;float:right" /></li>
	<li class="dugme3" id="c3" title="cc3">Item 3<input type="number" value="1" min="1" name="ccc3" id="ccc3" style="width:34px;float:right" /></li>
	<li class="dugme3" id="c4" title="cc4">Item 4<input type="number" value="1" min="1" name="ccc4" id="ccc4" style="width:34px;float:right" /></li>
	<li class="dugme3" id="c5" title="cc5">Item 5<input type="number" value="1" min="1" name="ccc5" id="ccc5" style="width:34px;float:right" /></li>
</ul>
<ul name="x1" id="x1">
<li name="y2">hi world<input type="text" name="xx" id="xx" /></li>
<input type="text" name="xx2" id="xx2" />
</ul>
<br/>
<input type="button" value="klikni me 1" onclick="sorter1()" />
<input type="button" value="klikni me 2" onclick="sorter2()" />
<input type="button" value="klikni me 3" onclick="sorter3()"...

CSS

ul {font-family:arial}
	#sortable1, #sortable2, #sortable3 {
	list-style-type: none;
	margin: 0;
	padding: 0 0 2.5em;
	float: left;
	margin-right: 10px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
#sortable1 li, #sortable2 li, #sortable3 li {
	margin: 0 5px 5px 5px;
	padding: 5px;
	font-size: 1em;
	width: 120px;
	height:26px
}
  .dugme1 {
	border:2px solid #aac;
	background:#eef;
	-moz-border-radius: 7px;
	border-radius: 7px;
  }
  .dugme2 {
	border:2px solid #caa;
	background:#fee;
	-moz-border-radius: 7px;
	border-radius: 7px;
  }
  .dugme3 {
	border:2px solid #aca;
	background:#efe;
	-moz-border-radius: 7px;
	border-radius: 7px;
  }

JavaScript

$(function() {
    $( "#sortable1, #sortable2, #sortable3" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  function sorter1() {
	var sortedIDs = $( ".connectedSortable" ).sortable( "toArray" );
	document.getElementById("sorterklik1").innerHTML=sortedIDs;
  }
  function sorter2() {
	var sortedIDs = $( "#sortable1" ).sortable( "toArray" );
	document.getElementById("sorterklik2").innerHTML=sortedIDs;
  }
  function sorter3() {
	var sortedIDs = $( "#sortable2" ).sortable( "toArray" );
	document.getElementById("sorterklik3").innerHTML=sortedIDs;
  }
  function sorter4() {
	var sortedIDs = $( "#sortable3" ).sortable( "toArray" );
	document.getElementById("sorterklik4").innerHTML=sortedIDs;
  }
  function sorter5() {
	var sortedIDs = $( "#sortable1" ).sortable( "toArrayS" );
	document.getElementById("sorterklik2").innerHTML=sortedIDs;
	var sortedIDs = $( "#sortable2" ).sortable( "toArrayS" );
	document.getElementById("sorterklik3").innerHTML=sortedIDs;
	var sortedIDs = $( "#sortable3" ).sortable( "toArrayS" );
	document.getElementById("sorterklik4").innerHTML=sortedIDs;
  }
  function dodatak() {
	var dod = $("#c1").children().val();
	$("#dodat").html(dod);
  }
  $(function() {
    var spinner = $( "#spinner" ).spinner();
 
    $( "#disable" ).click(function() {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    });
    $( "#destroy" ).click(function() {
      if ( spinner.data( "ui-spinner" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    });
    $( "#getvalue" ).click(function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#setvalue" ).click(function() {
      spinner.spinner( "value", 5 );
    });
 
    $( "button" ).button();
  });
function kurser() {
	$.getJSON('http://rate-exchange.appspot.com/currency?from=EUR&to=RSD', function(data)...