JSFiddle - React, Tailwind, and code Playground

Select List Option

by chrischilcoat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox4.9.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/yakabox/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/ui.yakabox.contentadd.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/jquery-ui.structure.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/ui-dialog/ui.themeroller.theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front formDialog contentAdd ui-draggable ui-resizable" aria-describedby="selectDialog" aria-labelledby="ui-id-4" style=" height: auto; width: 630px;">
  <div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle">
    <span id="ui-id-4" class="ui-dialog-title">Select List Options</span>
    <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only...

SCSS

.ui-webform-select-list {
  display: inline-block; 
  padding-left: 20px; 
  vertical-align:middle;
  min-width: 500px;
  
  .ui-icon-grip-dotted-vertical {
      float:left;
  }
  .ui-select-list-label {
      float:left
  }
  .ui-select-list-content {
  		border:1px solid #ccc; 
      width: 70%;
      margin-left: 10px;
      float:left;
      overflow: visible;
      word-break: break-all;
      -moz-appearance: textfield;
      -webkit-appearance: textfield;
      background-color: white;
      background-color: -moz-field;
      box-shadow: 1px 1px 1px 0 lightgray inset;  
      font-size: 1em;
      min-height: 18px;
      padding: 2px 3px;
   }
   .ui-select-list-content-short {
   		width: 30%;
   }
   .ui-select-list-delete-icon {
      cursor: pointer;
      float:left; 
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: text-bottom;
   }
   select {
      float:left;
      width: 40%;
      height: 18px;
   }
}
  #sortable { list-style-type: none; margin: 0; padding: 0; }
  #sortable li { padding:10px 5px;}
  #sortable li span { position: absolute; margin-left: -1.3em; }
  .fa-arrows-v { margin-top:5px; }
  .draggableLineItem {margin:10px 0px;}

JavaScript

$( function() {
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();

    var i =   ' <div id="draggableLineItem_0" class="draggableLineItem ui-draggable ui-draggable-handle ui-webform-select-list ui-sortable-handle" data-value=""> ' +
              '    <span class="fa fa-arrows-v pull-left"> </span> ' +
              '    <span class="ui-select-list-label">&nbsp;Label: </span> ' +
              '    <input type="text" class="pull-left proto-input"/> ' +
              '    <div class="ui-select-list-delete-icon"> ' +
              '       <img src="https://yakabod.yakabox.com/images/menuicon/delete.gif" border="0" title="Delete This Item" id="imgDeleteLineItem_0"> ' +
              '   </div> ' +
              ' </div> ';         
             
      $('#btnAddSelectOpt').on('click', function() {
        $("#selectTargetSection").append(i);
      });     
      
      $('body').on('click', '.ui-select-list-delete-icon', function() {
        $(this).closest('#draggableLineItem_0').remove()
      });  
      
      function sortza(selector) { 
        $(selector).children("div").sort(function(a, b) { 
          var A = $(a).data('value'); 
          var B = $(b).data('value');
          return (A > B) ? -1 : (A < B) ? 0 : 1;  
        }).appendTo(selector); 
      } 
      
      function sortaz(selector) { 
        $(selector).children("div").sort(function(a, b) { 
          var A = $(a).data('value'); 
          var B = $(b).data('value'); 
          return (A < B) ? -1 : (A > B) ? 1 : 0; 
        }).appendTo(selector); 
      } 

      $('.proto-js-sortbutton-z-a').on('click', function(e) { 
        sortza("#selectTargetSection"); 
        
        $(this).removeClass('btn-default').addClass('btn-primary');
        
/*
        setTimeout(function(){ 
        
          $(this).removeClass('btn-primary').addClass('btn-default');
        
        
        }, 500);
        */
        
         setTimeout(function(){
             
            ...