Splitting and editing a timeline for a form submission
<p>My purpose is to split a certain timeline in divisions.</p>

<p>My only idea of doing it is by doing something like this:</p>

<p><a href="http://i.stack.imgur.com/UlkzF.jpg" rel="nofollow">Dividable timeline</a></p>

<p>Another thing I want to be able to do is resize them by dragging one end to the left or to the right, when this is done, the next one adjusts so they ocupy the same space.</p>

<p>Any division can be split further.</p>

<p>this is what I've come up with but I'm not pleased with it at all:</p>

<p><a href="https://jsfiddle.net/syj6z05v/2/" rel="nofollow">https://jsfiddle.net/syj6z05v/2/</a></p>

<pre><code>$(function() {
    $( "#resizable1" ).resizable({
      containment: "#container"
    });
    $( "#resizable2" ).resizable({
      containment: "#container"
    });
    $( "#resizable3" ).resizable({
      containment: "#container"
    });
});

$(function() {
    var isDragging = false;
    var okay = 0;
    var next;
    $(".a")
    .mousedown(function() {
        okay = 1;
        isDragging = false;
    })
    .mousemove(function() {
        if (okay == 1){
        next = $(".a").next();

        var width = 0;
        $(this).parent().children().each(function() {
            width += $(this).outerWidth( true );
        });
        next.width(next.parent().width() - (width - next.width()));
        isDragging = true;
        }
     })
    .mouseup(function() {
        okay = 0;
        isDragging = false;
    });
});
</code></pre>