diff --git a/assets/js/frontend_book.js b/assets/js/frontend_book.js
index 90815ec1..e51e5f0e 100644
--- a/assets/js/frontend_book.js
+++ b/assets/js/frontend_book.js
@@ -632,7 +632,7 @@ window.FrontendBook = window.FrontendBook || {};
 
         data.appointment = {
             start_datetime: $('#select-date').datepicker('getDate').toString('yyyy-MM-dd')
-            + ' ' + Date.parse($('.selected-hour').text()).toString('HH:mm') + ':00',
+            + ' ' + Date.parse($('.selected-hour').data('value') || '').toString('HH:mm') + ':00',
             end_datetime: calculateEndDatetime(),
             notes: $('#notes').val(),
             is_unavailable: false,
@@ -666,7 +666,7 @@ window.FrontendBook = window.FrontendBook || {};
 
         // Add the duration to the start datetime.
         var startDatetime = $('#select-date').datepicker('getDate').toString('dd-MM-yyyy')
-            + ' ' + Date.parse($('.selected-hour').text()).toString('HH:mm');
+            + ' ' + Date.parse($('.selected-hour').data('value') || '').toString('HH:mm');
         startDatetime = Date.parseExact(startDatetime, 'dd-MM-yyyy HH:mm');
         var endDatetime;
 
diff --git a/assets/js/frontend_book_api.js b/assets/js/frontend_book_api.js
index 09b0537b..eb177b02 100755
--- a/assets/js/frontend_book_api.js
+++ b/assets/js/frontend_book_api.js
@@ -90,7 +90,7 @@ window.FrontendBookApi = window.FrontendBookApi || {};
                     var selectedTimezone = $('#select-timezone').val();
                     var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm';
 
-                    response.forEach(function (availableHour, index) {
+                    response.forEach(function (availableHour) {
                         var availableHourMoment = moment
                             .tz(selectedDate + ' ' + availableHour + ':00', providerTimezone)
                             .tz(selectedTimezone);
@@ -98,6 +98,9 @@ window.FrontendBookApi = window.FrontendBookApi || {};
                         $('#available-hours').append(
                             $('<button/>', {
                                 'class': 'btn btn-outline-secondary btn-block shadow-none available-hour',
+                                'data': {
+                                    'value': availableHour
+                                },
                                 'text': availableHourMoment.format(timeFormat)
                             })
                         );