Multiple draggable column handles

new to javacsript and first time coding a web from scratch...

Im trying to achieve draggable columns like this js fiddle i found here on stack: http://ift.tt/2dDhTnn

I succeeded in making it work for my web: http://ift.tt/2ddr8aj but am clueless about how to make multiple columns of that since the script targets the divs specifically (left,right):

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;
});
});

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 Im trying to achieve is just this kind of draggable columns with handles, but multiple of them, like the image attached to this post.

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