Il plug-in colResizable del campo personalizzato non funziona ma funziona nel violino

Ho ricevuto questo violino: http://jsfiddle.net/2h4kLzgj/9/

Ora sto cercando di aggiungere questo a un campo personalizzato in Joomla ma per qualche motivo non funziona affatto nell'amministratore.

Viene visualizzata la tabella ma la funzionalità non è presente. Ma poiché mostra il collegamento al campo personalizzato è corretto.

Ecco il contenuto del campo personalizzato:

<?php

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.formfield');
$document = JFactory::getDocument();
$document->addScript(JURI::root(true) .'/modules/mod_loginsecurepagemaker/models/assets/js/colResizable-1.5.min.js');
$document->addScript('https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js');
class JFormFieldColumnTwelve extends JFormField {

    protected $type = 'columntwelve';

    public function getInput() {

        return '<table id="tableResizable" border="0" cellpadding="0" cellspacing="0" >'.
                '<tbody>'.
                 '<tr>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                 '</tr>'.
                '</tbody>'.
               '</table>';
    }
}
?>
<style>
body {background:white;}
#tableResizable {
  width:100%;
}
td {border: 1px solid black;}
.JCLRgrip .JColResizer {
    cursor: col-resize!important;
}
.grip {
    width: 4px;
    height: 100%;
    margin-top: 0px;
    margin-left: 2px;
    background-color: black;
    position: relative;
    z-index: 88;
    cursor: col-resize!important;
    opacity: 1;
}
.grip:hover{
  background-color: red;}
</style>
<script>
(function ($) {
    $("#tableResizable").colResizable({
        fixed:true,
        liveDrag:true,
        gripInnerHtml:"<div class='grip'></div>",
        draggingClass:"dragging" });
})(jQuery);
</script>
<?php

Se qualcuno potesse aiutarmi a capire come ottenere lo stesso effetto del violino, questo è molto apprezzato.

PS: Style e Script verranno infine inseriti nella cartella delle risorse, questo è solo per test rapidi.