forms - jQuery - change value of one input field based on button click, then change value of another field based on next element or value -

here's fiddle: http://jsfiddle.net/pfevd/

i have following html:

<ul id="timeslots">     <li><button>10:00 am</button></li>     <li><button>10:30 am</button></li>     <li><button>11:00 am</button></li>     <li><button>11:30 am</button></li>     <li><button>12:00 am</button></li>     <li><button>12:30 am</button></li>     <li><button>1:00 pm</button></li>     <li><button>1:30 pm</button></li>     <li><button>2:00 pm</button></li>     <li><button>2:30 pm</button></li>     <li><button>3:00 pm</button></li> </ul>  <form>     <input type="text" name="appointment_date[start_time]" value="1:00 am" class="time start-time" />     &mdash;     <input type="text" name="appointment_date[end_time]" value="1:30 am" class="time end-time" /> </form> 

and following jquery:

$("#timeslots li button").click(function () {       var text = $(this).text();       $("input:text[name='appointment_date[start_time]']").val(text); }); 

what need figure out how simultaneously change value of "appointment_date[end_time]" start time of next time slot. in other words, if click button "10:00 am" start_time changes 10:00 , end_time simultaneously changes 10:30 am. how this?

thanks in advance!

so want parent's next sibling's child's text.

jsfiddle

$("#timeslots li button").click(function () {     var text = $(this).text();     $("input:text[name='appointment_date[start_time]']").val(text);      // parent's next sibling's child's text     var totext = $(this).parent().next().children('button').text()     $("input:text[name='appointment_date[end_time]']").val(totext); }); 

this doesn't work on last button though there isn't next button. may better off making function time of current button , add 30 minutes it. excuse messy code, idea though :)

jsfiddle

$("#timeslots li button").click(function () {     var text = $(this).text();     $("input:text[name='appointment_date[start_time]']").val(text);      var totext = addthirtyminutes(text);     $("input:text[name='appointment_date[end_time]']").val(totext); });  function addthirtyminutes(time) {     var timesplit = time.split(' ');     var hourandmin = timesplit[0].split(':');     hourandmin[0] = math.floor(parseint(hourandmin[0], 10) + ((parseint(hourandmin[1], 10) + 30) / 60));     if (hourandmin[0] == 13) {         hourandmin[0] = 1;         timesplit[1] = 'pm';     }     hourandmin[1] = (parseint(hourandmin[1], 10) + 30) % 60;      return hourandmin[0] + ':' + (hourandmin[1] < 10 ? '0' : '') + hourandmin[1] + ' ' + timesplit[1]; }