Adding and subtracting function not working on cloned div's - javascript
<p>So I have a form, where users can add or subtract time in minutes and they can also clone that div and add more values, but my problem is that I can't seem to get the function work on cloned div's. The function only adds or subtracts from the first div.</p>

<p>Here's jsFiddle: <a href="http://jsfiddle.net/W7w58/2/" rel="nofollow">http://jsfiddle.net/W7w58/2/</a></p>

<p>Clicking on the + or - starts the function.</p>

<p>Here's the code, but I guess it is easier to understand the problem when trying out the jsFiddle:</p>

<p>HTML:</p>

<pre><code>&lt;button id="clone-btn"&gt;Clone&lt;/button&gt;
&lt;div id="clone-div"&gt;
   &lt;a href="#" class="btn btn-subtract"&gt;-&lt;/a&gt;
   &lt;a href="#" class="btn"&gt;&lt;input type="text" class="input-field" id="input-field" name="input-field" value="0:00"&gt;&lt;/a&gt;
   &lt;a href="#" class="btn btn-add"&gt;+&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>/* for cloning */
$("#clone-btn").click(function() {
    $('#clone-div').clone(true).insertAfter('#clone-div');
    return false;
});


/* for the function */
var $input = $('.input-field');
$input.data('minutes', parseTimeString($input.val()));

function parseTimeString(str) {
    var time = str.split(":");
    return (parseInt(time[0])*60) + parseInt(time[1]);
}

$('.btn-add').on('click', function() {
    changeTime(1);
});

$('.btn-subtract').on('click', function() {
    changeTime(-1);
});
function changeTime(mins) {
    var currentTime = parseInt($input.data('minutes')),
    newTime = currentTime + mins,
    minutes = (newTime % 60).toString(),
    hours = (Math.floor(newTime / 60)).toString();
    if (minutes.length === 0) {
        minutes = "00";
    } else if (minutes.length === 1) {
        minutes = "0" + minutes;
    }
    $input.data('minutes', newTime).val(hours + ":" + minutes);
}
</code></pre>

<p>I would appreciate all the help you can give me :).  </p>
