jquery .bind or .change to populate span tag value from calendar onclick

Question

I have a booking form where end users can reserve the date they wish, On occasion this can change right up to the payment page, If a date they previously tried to select becomes available they are notified and given the chance to change the date.

I need to be able to populate/change/bind to a span tag that already has text rendered when the dom loads, for example:

<span id="ReservationDate" name="ReservationDate">Your reservation date: 23/03/2016</span>

If they click to change the date a calendar provides the available dates and onclick selects the date with the following example attributes:

<td data-day="23" class="is-selected"><button class="pika-button" type="button">23</button></td>

<td data-day="24" class=""><button class="pika-button" type="button">24</button></td>

I need to be able to bind the date attribute for example: data-day="24" that they select to the span tag without having to change the span tag to an input field as this will break the css and page layout.

As a total newbie in jquery and javascript i would be very greatful if anyone can lend a helping hand on this, it will mean a lot and be very appreicated.

Thankyou.

Short update:

                    <div class="PaymentForm-ReservationDate">
                     <span id="ReservationDate" name="ReservationDate">Date: {{ $getResDate }}</span><br/>
                     <a href="" date-picker="" id="reservation-date">Change Date?</a>
                    </div>

Answer 1

Try this:

var span = document.getElementById( 'ReservationDate' );

var updateDate = function(){
    span.innerHTML = 'Your reservation date: ' + this.dataset.day + span.innerHTML.slice( -8 );
};

var tds = document.getElementsByTagName( 'td' );
for( var i=0; i<tds.length; i++ )
    tds[i].onclick = updateDate;

Answer 2

I'm not sure if this solve your issue, but there is the code:

    $(document).on('click', '.pika-button', function(){
      var dataDay = $(this).parent('td').attr('data-day');
      $('span#ReservationDate').text('Your reservation date: ' + dataDay + '/03/2016')
    });