JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Sorting A Table With jQuery UI</h1>
<table border="0" id="sort">
<caption>Intervention Tip Options</caption>
<thead>
<tr>
<th class="index sequence" title="Sequence">#</th>
<th class="itemlabel" title="Label">Label</th>
<th class="rowcta"></th>
<th></th>
</tr>
</thead>
<tbody class="ui-sortable">
<tr id="interventionTipOptionItem0" style="">
<td class="index sequence" id="item_sequenceno">1</td>
<td class="itemlabel htmlInstructions">
<textarea name="item.Label" id="item_Label0" class="text-box multi-line">one</textarea>
</td>
<td class="rowcta">Delete</td>
</tr>
<tr id="interventionTipOptionItem1" style="">
<td class="index sequence" id="item_sequenceno">2</td>
<td class="itemlabel htmlInstructions">
<textarea name="item.Label" id="item_Label1" class="text-box multi-line">TWO</textarea>
</td>
<td class="rowcta">Delete</td>
</tr>
<tr id="interventionTipOptionItem2" style="">
<td class="index sequence" id="item_sequenceno">3</td>
<td class="itemlabel htmlInstructions">
<textarea name="item.Label" id="item_Label2" class="text-box multi-line">three</textarea>
</td>
<td class="rowcta">Delete</td>
</tr>
</tbody>
</table>
CSS
TEXTAREA
{
height: 120px;
width: 300px;
}
JavaScript
/*
* jHtmlArea 0.7.5 - WYSIWYG Html Editor jQuery Plugin
* Copyright (c) 2012 Chris Pietschmann
* http://jhtmlarea.codeplex.com
* Licensed under the Microsoft Reciprocal License (Ms-RL)
* http://jhtmlarea.codeplex.com/license
*/
(function($){$.fn.htmlarea=function(opts){if(opts&&typeof(opts)==="string"){var args=[];for(var i=1;i<arguments.length;i++){args.push(arguments[i])}var htmlarea=jHtmlArea(this[0]);var f=htmlarea[opts];if(f){return f.apply(htmlarea,args)}}return this.each(function(){jHtmlArea(this,opts)})};var jHtmlArea=window.jHtmlArea=function(elem,options){if(elem.jquery){return jHtmlArea(elem[0])}if(elem.jhtmlareaObject){return elem.jhtmlareaObject}else{return new jHtmlArea.fn.init(elem,options)}};jHtmlArea.fn=jHtmlArea.prototype={jhtmlarea:"0.7.5",init:function(elem,options){if(elem.nodeName.toLowerCase()==="textarea"){var opts=$.extend({},jHtmlArea.defaultOptions,options);elem.jhtmlareaObject=this;var textarea=this.textarea=$(elem);var container=this.container=$("<div/>").addClass("jHtmlArea").width(textarea.width()).insertAfter(textarea);var toolbar=this.toolbar=$("<div/>").addClass("ToolBar").appendTo(container);priv.initToolBar.call(this,opts);var iframe=this.iframe=$("<iframe />").height(textarea.height());iframe.width(textarea.width()-($.browser.msie?0:4));var htmlarea=this.htmlarea=$("<div/>").append(iframe);container.append(htmlarea).append(textarea.hide());priv.initEditor.call(this,opts);priv.attachEditorEvents.call(this);iframe.height(iframe.height()-toolbar.height());toolbar.width(textarea.width()-2);if(opts.loaded){opts.loaded.call(this)}}},dispose:function(){this.textarea.show().insertAfter(this.container);this.container.remove();this.textarea[0].jhtmlareaObject=null},execCommand:function(a,b,c){this.iframe[0].contentWindow.focus();this.editor.execCommand(a,b||false,c||null);this.updateTextArea()},ec:function(a,b,c){this.execCommand(a,b,c)},queryCommandValue:function(a){this.iframe[0].contentWindow.focus();return...