Multiple draggable column handles
<p>New to javacsript and first time coding a web from scratch...</p>

<p>Hello all.
I'm trying to achieve draggable columns like this js fiddle I found here on stack:
    <a href="http://jsfiddle.net/T4St6/" rel="nofollow noreferrer">http://jsfiddle.net/T4St6/</a></p>

<p>I succeeded in making it work for my web: <a href="http://www.dariusou.com/" rel="nofollow noreferrer">http://www.dariusou.com/</a> but am clueless about how to make multiple columns of that since the script targets the divs specifically (left,right):    </p>

<pre><code>var isResizing = false,
lastDownX = 0;

$(function () {
var container = $('#container'),
    left = $('#left'),
    right = $('#right'),
    handle = $('#handle');

handle.on('mousedown', function (e) {
    isResizing = true;
    lastDownX = e.clientX;
});

$(document).on('mousemove', function (e) {
    // we don't want to do anything if we aren't resizing.
    if (!isResizing) 
        return;

    var offsetRight = container.width() - (e.clientX - container.offset().left);

    left.css('right', offsetRight);
    right.css('width', offsetRight);
}).on('mouseup', function (e) {
    // stop resizing
    isResizing = false;
});
});
</code></pre>

<p>Would this code be convenient to achieve what I want, or should I look for another code to work from? (I cant write scripts from scratch yet) What I'm trying to achieve is just this kind of draggable columns with handles, but multiple of them, like the image attached to this post.
<a href="https://i.stack.imgur.com/MLWZ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MLWZ0.png" alt="enter image description here"></a></p>

<p>Ideally I would also like to achieve a random drag position for each of these divs( on every load )in the future.(see attached)</p>

<p><a href="https://i.stack.imgur.com/BTseG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BTseG.png" alt="enter image description here"></a></p>