<tr>
<td>
    <ol start="1" class="selectable">
        <li class="ui-widget-content">0800 - 0830</li>
        <li class="ui-widget-content">0830 - 0900</li>
    </ol>
</td>
<td>
    <ol start="1" class="selectable">
        <li class="ui-widget-content">0800 - 0830</li>
        <li class="ui-widget-content">0830 - 0900</li>
    </ol>
</td>

<script>
$(function() {
    $( ".selectable" ).selectable({
        stop: function() {

            $(".selectable li").css({"background":"white","color":"black"});

            var result = $( "#select-result" ).empty();
            var bookingHours = $( "#booking-hours" ).empty();
            var bookingPeriod = [];
            var count = 0;


            $( ".ui-selected", this ).each(
                function() {
                    $( this ).css({"background":"#F39814","color":"white"});
                    var index = $( ".selectable li" ).index( this )+1;
                    bookingPeriod[count] = index;
                    count++;
                }
            );
            bookingHours.append( (count*0.5) + " Hours" );

            var bookingFrom = bookingPeriod[0];
            var bookingTo = bookingPeriod[bookingPeriod.length-1];

            result.append( ( bookingFrom ) + " to " + ( bookingTo ) );
        }
    });
});
</script>

var index = $( ".selectable li", $(this).parent() ).index( this )+1;