jQuery input field change time using .split() method

Question

I have question for jQuery script just can´t get it work.

Actually, I have two input fields with different time values for START and FINISH TIME of event splitted by ":". (ex. 08:00 and the other field 16:00)

All I need now, is when user click on some button called for ex. "30minutes" this input field with FINISH TIME takes value from START TIME input and what is most important it adds these 30 minutes at the end, so this field will finally change for 08:30. Like it will be 30minutes event. Do you understand my explanation?

What I finally did on JFiddle is similiar, the problem is that these 30 minutes rest at the end, but it is not overwriting the old 00 minutes.

Let´s take a look: JFIDDLE

HTML :

<input type="radio" name="adds" id="30min" value="30">
<input type="radio" name="adds" id="45min" value="45">
</div>
<input id="start_time" type="text" value="08:00">
<input id="end_time" type="text" value="16:00">

Javascript :

$( "#30min" ).click(function() {
    var text = $("#end_time").val().split(" : ");
        var text = $("#start_time").val().split(" : ");
    text[1] = $("#30min").val()
  $( "input" ).val( text );
});

thanks for any tips ...

Answer 1

I think this what you want,

$("#30min,#45min" ).click(function() {
    var that = $(this);
    $( "input#start_time, input#end_time" ).each(function(e){
      var text = $(this).val();
        var textArr = text.split(":");  
        textArr[1] = that.val();
        $(this).val(textArr[0]+':'+textArr[1]);
    })

});

Please see the fiddle