From 74c10d3b7b385f8f22ba1e1a8b8275a079fd6bdf Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Thu, 7 May 2020 18:47:14 +0200
Subject: [PATCH] Converted hard coded HTML to jQuery generated markup.

---
 assets/css/general.css                        |   8 +
 .../js/backend_calendar_appointments_modal.js |  31 +-
 assets/js/backend_calendar_default_view.js    | 318 ++++++++----
 assets/js/backend_calendar_table_view.js      | 313 ++++++++----
 assets/js/backend_categories_helper.js        |  29 +-
 assets/js/backend_customers_helper.js         |  93 +++-
 assets/js/backend_services_helper.js          |  50 +-
 assets/js/backend_users.js                    |  96 ++--
 assets/js/backend_users_admins.js             |  35 +-
 assets/js/backend_users_providers.js          |  65 ++-
 assets/js/backend_users_secretaries.js        |  47 +-
 assets/js/frontend_book.js                    | 164 ++++--
 assets/js/frontend_book_api.js                |  33 +-
 assets/js/frontend_book_success.js            |  50 +-
 assets/js/general_functions.js                |  35 --
 assets/js/working_plan.js                     | 479 ++++++++++++++----
 16 files changed, 1279 insertions(+), 567 deletions(-)

diff --git a/assets/css/general.css b/assets/css/general.css
index b4c65a6a..d5e0e39a 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -395,3 +395,11 @@ li.language:hover {
 #message_box pre {
     max-height: 250px;
 }
+
+body .popover-content strong {
+    min-width: 80px; display:inline-block;
+}
+
+body .popover-content button {
+    margin-right: 10px;
+}
diff --git a/assets/js/backend_calendar_appointments_modal.js b/assets/js/backend_calendar_appointments_modal.js
index 81e8e593..a7e1f632 100755
--- a/assets/js/backend_calendar_appointments_modal.js
+++ b/assets/js/backend_calendar_appointments_modal.js
@@ -187,9 +187,12 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
                 $list.slideDown('slow');
                 $('#filter-existing-customers').fadeIn('slow');
                 $('#filter-existing-customers').val('');
-                $.each(GlobalVariables.customers, function (index, c) {
-                    $list.append('<div data-id="' + c.id + '">'
-                        + c.first_name + ' ' + c.last_name + '</div>');
+                GlobalVariables.customers.forEach(function (customer) {
+                    $('<div/>', {
+                        'data-id': customer.id,
+                        'text': customer.first_name + ' ' + customer.last_name
+                    })
+                        .appendTo($list);
                 });
             } else {
                 $list.slideUp('slow');
@@ -241,9 +244,12 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
                 .done(function (response) {
                     $list.empty();
 
-                    response.forEach(function (customer, index) {
-                        $list.append('<div data-id="' + customer.id + '">'
-                            + customer.first_name + ' ' + customer.last_name + '</div>');
+                    response.forEach(function (customer) {
+                        $('<div/>', {
+                            'data-id': customer.id,
+                            'text': customer.first_name + ' ' + customer.last_name
+                        })
+                            .appendTo($list);
 
                         // Verify if this customer is on the old customer list.
                         var result =  GlobalVariables.customers.filter(function(globalVariablesCustomer) {
@@ -269,8 +275,11 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
                             || customer.city.toLowerCase().indexOf(key) !== -1
                             || customer.zip_code.toLowerCase().indexOf(key) !== -1
                             || customer.notes.toLowerCase().indexOf(key) !== -1) {
-                            $list.append('<div data-id="' + customer.id + '">'
-                                + customer.first_name + ' ' + customer.last_name + '</div>');
+                            $('<div/>', {
+                                'data-id': customer.id,
+                                'text': customer.first_name + ' ' + customer.last_name
+                            })
+                                .appendTo($list);
                         }
                     });
                 });
@@ -308,10 +317,8 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
 
                     // If the current provider is able to provide the selected service, add him to the listbox.
                     if (Number(providerServiceId) === Number(serviceId)) {
-                        var optionHtml = '<option value="' + provider.id + '">'
-                            + provider.first_name + ' ' + provider.last_name
-                            + '</option>';
-                        $('#select-provider').append(optionHtml);
+                        $('#select-provider')
+                            .append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
                     }
                 });
             });
diff --git a/assets/js/backend_calendar_default_view.js b/assets/js/backend_calendar_default_view.js
index e8b43883..fae70db8 100755
--- a/assets/js/backend_calendar_default_view.js
+++ b/assets/js/backend_calendar_default_view.js
@@ -279,7 +279,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
     function calendarEventClick(event, jsEvent, view) {
         $('.popover').remove(); // Close all open popovers.
 
-        var html;
+        var $html;
         var displayEdit;
         var displayDelete;
 
@@ -301,109 +301,217 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                 notes = '<strong>Notes</strong> ' + event.data.notes;
             }
 
-            html =
-                '<style type="text/css">'
-                + '.popover-content strong {min-width: 80px; display:inline-block;}'
-                + '.popover-content button {margin-right: 10px;}'
-                + '</style>' +
-                '<strong>' + EALang.start + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.end + '</strong> '
-                + GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>'
-                + notes
-                + '<hr>' +
-                '<center>' +
-                '<button class="edit-popover btn btn-primary ' + displayEdit + '">' + EALang.edit + '</button>' +
-                '<button class="delete-popover btn btn-danger ' + displayDelete + '">' + EALang.delete + '</button>' +
-                '<button class="close-popover btn btn-default" data-po=' + jsEvent.target + '>' + EALang.close + '</button>' +
-                '</center>';
+            $html = $('<div/>', {
+                'html': [
+                    $('<strong/>', {
+                        'text': EALang.start
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.end
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<span/>', {
+                        'text': notes
+                    }),
+                    $('<br/>'),
+
+                    $('<hr/>'),
+
+                    $('<div/>', {
+                        'class': 'text-center',
+                        'html': [
+                            $('<button/>', {
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
+                                'text': EALang.edit
+                            }),
+                            $('<button/>', {
+                                'class': 'delete-popover btn btn-danger ' + displayDelete,
+                                'text': EALang.delete
+                            }),
+                            $('<button/>', {
+                                'class': 'close-popover btn btn-default',
+                                'text': EALang.close
+                            })
+                        ]
+                    })
+                ]
+            });
         } else if ($(this).hasClass('fc-extra') || $parent.hasClass('fc-extra') || $altParent.hasClass('fc-extra')) {
             displayDelete = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
                 && GlobalVariables.user.privileges.appointments.delete === true)
                 ? '' : 'hide'; // Same value at the time.
 
             var provider = '';
+
             if (event.data) { // Only custom unavailable periods have notes.
                 provider = '<strong>' + EALang.provider + '</strong> ' + event.data.first_name + ' ' + event.data.last_name;
             }
 
             var extraPeriod = jQuery.parseJSON(event.data.settings.extra_working_plan)[event.start.format()];
 
-            html =
-                '<style type="text/css">'
-                + '.popover-content strong {min-width: 80px; display:inline-block;}'
-                + '.popover-content button {margin-right: 10px;}'
-                + '</style>' +
-                '<strong>' + EALang.start + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.start, GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.end + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.end, GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.timezone + '</strong> '
-                + GlobalVariables.timezones[event.data.provider.timezone]
-                + '<br>' +
-                + provider
-                + '<hr>' +
-                '<center>' +
-                '<button class="delete-popover btn btn-danger ' + displayDelete + '">' + EALang.delete + '</button>' +
-                '<button class="close-popover btn btn-default" data-po=' + jsEvent.target + '>' + EALang.close + '</button>' +
-                '</center>';
+            $html = $('<div/>', {
+                'html': [
+                    $('<strong/>', {
+                        'text': EALang.provider
+                    }),
+                    $('<span/>', {
+                        'text': event.data ? event.data.first_name + ' ' + event.data.last_name : '-'
+                    }),
+                    $('<br/>'),
 
+                    $('<strong/>', {
+                        'text': EALang.start
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.end
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.timezone
+                    }),
+                    $('<span/>', {
+                        'text': GlobalVariables.timezones[event.data.provider.timezone]
+                    }),
+                    $('<br/>'),
+
+                    $('<hr/>'),
+
+                    $('<div/>', {
+                        'class': 'text-center',
+                        'html': [
+                            $('<button/>', {
+                                'class': 'delete-popover btn btn-danger ' + displayDelete,
+                                'text': EALang.delete
+                            }),
+                            $('<button/>', {
+                                'class': 'close-popover btn btn-default',
+                                'text': EALang.close
+                            })
+                        ]
+                    })
+                ]
+            });
         } else {
             displayEdit = (GlobalVariables.user.privileges.appointments.edit === true)
                 ? '' : 'hide';
             displayDelete = (GlobalVariables.user.privileges.appointments.delete === true)
                 ? '' : 'hide';
 
-            html =
-                '<style type="text/css">'
-                + '.popover-content strong {min-width: 80px; display:inline-block;}'
-                + '.popover-content button {margin-right: 10px;}'
-                + '</style>' +
-                '<strong>' + EALang.start + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.end + '</strong> '
-                + GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.timezone + '</strong> '
-                + GlobalVariables.timezones[event.data.provider.timezone]
-                + '<br>' +
-                '<strong>' + EALang.service + '</strong> '
-                + event.data.service.name
-                + '<br>' +
-                '<strong>' + EALang.provider + '</strong> '
-                + GeneralFunctions.renderMapIcon(event.data.customer) + ' '
-                + event.data.provider.first_name + ' '
-                + event.data.provider.last_name
-                + '<br>' +
-                '<strong>' + EALang.customer + '</strong> '
-                + GeneralFunctions.renderMapIcon(event.data.customer) + ' '
-                + event.data.customer.first_name + ' '
-                + event.data.customer.last_name
-                + '<br>' +
-                '<strong>' + EALang.email + '</strong> '
-                + GeneralFunctions.renderMailIcon(event.data.customer.email) + ' '
-                + event.data.customer.email
-                + '<br>' +
-                '<strong>' + EALang.phone_number + '</strong> '
-                + GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number) + ' '
-                + event.data.customer.phone_number
-                + '<hr>' +
-                '<div class="text-center">' +
-                '<button class="edit-popover btn btn-primary ' + displayEdit + '">' + EALang.edit + '</button>' +
-                '<button class="delete-popover btn btn-danger ' + displayDelete + '">' + EALang.delete + '</button>' +
-                '<button class="close-popover btn btn-default" data-po=' + jsEvent.target + '>' + EALang.close + '</button>' +
-                '</div>';
+            $html = $('<div/>', {
+                'html': [
+                    $('<strong/>', {
+                        'text': EALang.start
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.end
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.timezone
+                    }),
+                    $('<span/>', {
+                        'text': GlobalVariables.timezones[event.data.provider.timezone]
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.service
+                    }),
+                    $('<span/>', {
+                        'text': event.data.service.name
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.provider
+                    }),
+                    GeneralFunctions.renderMapIcon(event.data.provider),
+                    $('<span/>', {
+                        'text': event.data.provider.first_name + ' ' + event.data.provider.last_name
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.customer
+                    }),
+                    GeneralFunctions.renderMapIcon(event.data.customer),
+                    $('<span/>', {
+                        'text': event.data.customer.first_name + ' ' + event.data.customer.last_name
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.email
+                    }),
+                    GeneralFunctions.renderMailIcon(event.data.customer.email),
+                    $('<span/>', {
+                        'text': event.data.customer.email
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.phone_number
+                    }),
+                    GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number),
+                    $('<span/>', {
+                        'text': event.data.customer.phone_number
+                    }),
+                    $('<br/>'),
+
+                    $('<hr/>'),
+
+                    $('<div/>', {
+                        'class': 'text-center',
+                        'html': [
+                            $('<button/>', {
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
+                                'text': EALang.edit
+                            }),
+                            $('<button/>', {
+                                'class': 'delete-popover btn btn-danger ' + displayDelete,
+                                'text': EALang.delete
+                            }),
+                            $('<button/>', {
+                                'class': 'close-popover btn btn-default',
+                                'text': EALang.close
+                            })
+                        ]
+                    })
+                ]
+            });
         }
 
         $(jsEvent.target).popover({
             placement: 'top',
             title: event.title,
-            content: html,
+            content: $html,
             html: true,
             container: '#calendar',
             trigger: 'manual'
@@ -1262,34 +1370,36 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
 
         // Fill the select list boxes of the page.
         if (GlobalVariables.availableProviders.length > 0) {
-            var optgroupHtml = '<optgroup label="' + EALang.providers + '" type="providers-group">';
+            $('<optgroup/>', {
+                'label': EALang.providers,
+                'type': 'providers-group',
+                'html': GlobalVariables.availableProviders.map(function (availableProvider) {
+                    var hasGoogleSync = availableProvider.settings.google_sync === '1' ? 'true' : 'false';
 
-            $.each(GlobalVariables.availableProviders, function (index, provider) {
-                var hasGoogleSync = provider.settings.google_sync === '1' ? 'true' : 'false';
-
-                optgroupHtml +=
-                    '<option value="' + provider.id + '" type="' + FILTER_TYPE_PROVIDER + '" '
-                    + 'google-sync="' + hasGoogleSync + '">'
-                    + provider.first_name + ' ' + provider.last_name
-                    + '</option>';
-            });
-
-            optgroupHtml += '</optgroup>';
-
-            $('#select-filter-item').append(optgroupHtml);
+                    return $('<option/>', {
+                        'value': availableProvider.id,
+                        'type': FILTER_TYPE_PROVIDER,
+                        'google-sync': hasGoogleSync,
+                        'text': availableProvider.first_name + ' ' + availableProvider.last_name
+                    })
+                })
+            })
+                .appendTo('#select-filter-item');
         }
 
         if (GlobalVariables.availableServices.length > 0) {
-            optgroupHtml = '<optgroup label="' + EALang.services + '" type="services-group">';
-
-            $.each(GlobalVariables.availableServices, function (index, service) {
-                optgroupHtml += '<option value="' + service.id + '" type="' + FILTER_TYPE_SERVICE + '">' +
-                    service.name + '</option>';
-            });
-
-            optgroupHtml += '</optgroup>';
-
-            $('#select-filter-item').append(optgroupHtml);
+            $('<optgroup/>', {
+                'label': EALang.services,
+                'type': 'services-group',
+                'html': GlobalVariables.availableServices.map(function (availableService) {
+                    return $('<option/>', {
+                        'value': availableService.id,
+                        'type': FILTER_TYPE_SERVICE,
+                        'text': availableService.name
+                    })
+                })
+            })
+                .appendTo('#select-filter-item');
         }
 
         // Check permissions.
diff --git a/assets/js/backend_calendar_table_view.js b/assets/js/backend_calendar_table_view.js
index df9a39ae..d88c308f 100755
--- a/assets/js/backend_calendar_table_view.js
+++ b/assets/js/backend_calendar_table_view.js
@@ -308,18 +308,37 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             .append(new Option('1 ' + EALang.day, 1))
             .append(new Option('3 ' + EALang.days, 3));
 
-        var $calendarHeader = $('<div class="calendar-header" />').appendTo('#calendar');
+        var $calendarHeader = $('<div/>', {
+            'class': 'calendar-header'
+        })
+            .appendTo('#calendar');
 
-        $calendarHeader
-            .html(
-                '<button class="btn btn-xs btn-default previous">' +
-                '<span class="glyphicon glyphicon-chevron-left"></span>' +
-                '</button>' +
-                '<input type="text" class="select-date" value="' + GeneralFunctions.formatDate(new Date(), GlobalVariables.dateFormat) + '" />' +
-                '<button class="btn btn-xs btn-default next">' +
-                '<span class="glyphicon glyphicon-chevron-right"></span>' +
-                '</button>'
-            );
+        $('<button/>', {
+            'class': 'btn btn-xs btn-default previous',
+            'html': [
+                $('<span/>', {
+                    'class': 'glyphicon glyphicon-chevron-left'
+                })
+            ]
+        })
+            .appendTo($calendarHeader);
+
+        $('<input/>', {
+            'type': 'text',
+            'class': 'select-date',
+            'value': GeneralFunctions.formatDate(new Date(), GlobalVariables.dateFormat)
+        })
+            .appendTo($calendarHeader);
+
+        $('<button/>', {
+            'class': 'btn btn-xs btn-default next',
+            'html': [
+                $('<span/>', {
+                    'class': 'glyphicon glyphicon-chevron-right'
+                })
+            ]
+        })
+            .appendTo($calendarHeader);
 
         var dateFormat;
 
@@ -943,7 +962,9 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             var endHour = entry.end.split(':');
             var endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), endHour[0], endHour[1]);
             var eventDuration = Math.round((endDate - eventDate) / 60000);
-            var $event = $('<div class="event unavailability break" />');
+            var $event = $('<div/>', {
+                'class': 'event unavailability break'
+            });
 
             $event.html(
                 EALang.break +
@@ -983,7 +1004,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
     function onEventClick(event, jsEvent) {
         $('.popover').remove(); // Close all open popovers.
 
-        var html;
+        var $html;
         var displayEdit;
         var displayDelete;
 
@@ -1005,109 +1026,217 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                 notes = '<strong>Notes</strong> ' + event.data.notes;
             }
 
-            html =
-                '<style type="text/css">'
-                + '.popover-content strong {min-width: 80px; display:inline-block;}'
-                + '.popover-content button {margin-right: 10px;}'
-                + '</style>' +
-                '<strong>' + EALang.start + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.end + '</strong> '
-                + GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>'
-                + notes
-                + '<hr>' +
-                '<center>' +
-                '<button class="edit-popover btn btn-primary ' + displayEdit + '">' + EALang.edit + '</button>' +
-                '<button class="delete-popover btn btn-danger ' + displayDelete + '">' + EALang.delete + '</button>' +
-                '<button class="close-popover btn btn-default" data-po=' + jsEvent.target + '>' + EALang.close + '</button>' +
-                '</center>';
+            $html = $('<div/>', {
+                'html': [
+                    $('<strong/>', {
+                        'text': EALang.start
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.end
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<span/>', {
+                        'text': notes
+                    }),
+                    $('<br/>'),
+
+                    $('<hr/>'),
+
+                    $('<div/>', {
+                        'class': 'text-center',
+                        'html': [
+                            $('<button/>', {
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
+                                'text': EALang.edit
+                            }),
+                            $('<button/>', {
+                                'class': 'delete-popover btn btn-danger ' + displayDelete,
+                                'text': EALang.delete
+                            }),
+                            $('<button/>', {
+                                'class': 'close-popover btn btn-default',
+                                'text': EALang.close
+                            })
+                        ]
+                    })
+                ]
+            });
         } else if ($(this).hasClass('fc-extra') || $parent.hasClass('fc-extra') || $altParent.hasClass('fc-extra')) {
             displayDelete = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
                 && GlobalVariables.user.privileges.appointments.delete === true)
                 ? '' : 'hide'; // Same value at the time.
 
             var provider = '';
+
             if (event.data) { // Only custom unavailable periods have notes.
                 provider = '<strong>' + EALang.provider + '</strong> ' + event.data.first_name + ' ' + event.data.last_name;
             }
 
             var extraPeriod = jQuery.parseJSON(event.data.settings.extra_working_plan)[event.start.format()];
 
-            html =
-                '<style type="text/css">'
-                + '.popover-content strong {min-width: 80px; display:inline-block;}'
-                + '.popover-content button {margin-right: 10px;}'
-                + '</style>' +
-                '<strong>' + EALang.start + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.start, GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.end + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.end, GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.timezone + '</strong> '
-                + GlobalVariables.timezones[event.data.provider.timezone]
-                + '<br>' +
-                +provider
-                + '<hr>' +
-                '<center>' +
-                '<button class="delete-popover btn btn-danger ' + displayDelete + '">' + EALang.delete + '</button>' +
-                '<button class="close-popover btn btn-default" data-po=' + jsEvent.target + '>' + EALang.close + '</button>' +
-                '</center>';
+            $html = $('<div/>', {
+                'html': [
+                    $('<strong/>', {
+                        'text': EALang.provider
+                    }),
+                    $('<span/>', {
+                        'text': event.data ? event.data.first_name + ' ' + event.data.last_name : '-'
+                    }),
+                    $('<br/>'),
 
+                    $('<strong/>', {
+                        'text': EALang.start
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.end
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.timezone
+                    }),
+                    $('<span/>', {
+                        'text': GlobalVariables.timezones[event.data.provider.timezone]
+                    }),
+                    $('<br/>'),
+
+                    $('<hr/>'),
+
+                    $('<div/>', {
+                        'class': 'text-center',
+                        'html': [
+                            $('<button/>', {
+                                'class': 'delete-popover btn btn-danger ' + displayDelete,
+                                'text': EALang.delete
+                            }),
+                            $('<button/>', {
+                                'class': 'close-popover btn btn-default',
+                                'text': EALang.close
+                            })
+                        ]
+                    })
+                ]
+            });
         } else {
             displayEdit = (GlobalVariables.user.privileges.appointments.edit === true)
                 ? '' : 'hide';
             displayDelete = (GlobalVariables.user.privileges.appointments.delete === true)
                 ? '' : 'hide';
 
-            html =
-                '<style type="text/css">'
-                + '.popover-content strong {min-width: 80px; display:inline-block;}'
-                + '.popover-content button {margin-right: 10px;}'
-                + '</style>' +
-                '<strong>' + EALang.start + '</strong> '
-                + GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.end + '</strong> '
-                + GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
-                + '<br>' +
-                '<strong>' + EALang.timezone + '</strong> '
-                + GlobalVariables.timezones[event.data.provider.timezone]
-                + '<br>' +
-                '<strong>' + EALang.service + '</strong> '
-                + event.data.service.name
-                + '<br>' +
-                '<strong>' + EALang.provider + '</strong> '
-                + GeneralFunctions.renderMapIcon(event.data.customer) + ' '
-                + event.data.provider.first_name + ' '
-                + event.data.provider.last_name
-                + '<br>' +
-                '<strong>' + EALang.customer + '</strong> '
-                + GeneralFunctions.renderMapIcon(event.data.customer) + ' '
-                + event.data.customer.first_name + ' '
-                + event.data.customer.last_name
-                + '<br>' +
-                '<strong>' + EALang.email + '</strong> '
-                + GeneralFunctions.renderMailIcon(event.data.customer.email) + ' '
-                + event.data.customer.email
-                + '<br>' +
-                '<strong>' + EALang.phone_number + '</strong> '
-                + GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number) + ' '
-                + event.data.customer.phone_number
-                + '<hr>' +
-                '<div class="text-center">' +
-                '<button class="edit-popover btn btn-primary ' + displayEdit + '">' + EALang.edit + '</button>' +
-                '<button class="delete-popover btn btn-danger ' + displayDelete + '">' + EALang.delete + '</button>' +
-                '<button class="close-popover btn btn-default" data-po=' + jsEvent.target + '>' + EALang.close + '</button>' +
-                '</div>';
+            $html = $('<div/>', {
+                'html': [
+                    $('<strong/>', {
+                        'text': EALang.start
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.end
+                    }),
+                    $('<span/>', {
+                        'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.timezone
+                    }),
+                    $('<span/>', {
+                        'text': GlobalVariables.timezones[event.data.provider.timezone]
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.service
+                    }),
+                    $('<span/>', {
+                        'text': event.data.service.name
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.provider
+                    }),
+                    GeneralFunctions.renderMapIcon(event.data.provider),
+                    $('<span/>', {
+                        'text': event.data.provider.first_name + ' ' + event.data.provider.last_name
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.customer
+                    }),
+                    GeneralFunctions.renderMapIcon(event.data.customer),
+                    $('<span/>', {
+                        'text': event.data.customer.first_name + ' ' + event.data.customer.last_name
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.email
+                    }),
+                    GeneralFunctions.renderMailIcon(event.data.customer.email),
+                    $('<span/>', {
+                        'text': event.data.customer.email
+                    }),
+                    $('<br/>'),
+
+                    $('<strong/>', {
+                        'text': EALang.phone_number
+                    }),
+                    GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number),
+                    $('<span/>', {
+                        'text': event.data.customer.phone_number
+                    }),
+                    $('<br/>'),
+
+                    $('<hr/>'),
+
+                    $('<div/>', {
+                        'class': 'text-center',
+                        'html': [
+                            $('<button/>', {
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
+                                'text': EALang.edit
+                            }),
+                            $('<button/>', {
+                                'class': 'delete-popover btn btn-danger ' + displayDelete,
+                                'text': EALang.delete
+                            }),
+                            $('<button/>', {
+                                'class': 'close-popover btn btn-default',
+                                'text': EALang.close
+                            })
+                        ]
+                    })
+                ]
+            });
         }
 
         $(jsEvent.target).popover({
             placement: 'top',
             title: event.title,
-            content: html,
+            content: $html,
             html: true,
             container: '#calendar',
             trigger: 'manual'
diff --git a/assets/js/backend_categories_helper.js b/assets/js/backend_categories_helper.js
index 7666ceb5..0daeabc5 100644
--- a/assets/js/backend_categories_helper.js
+++ b/assets/js/backend_categories_helper.js
@@ -181,14 +181,19 @@
             .done(function (response) {
                 this.filterResults = response;
 
-                $('#filter-categories .results').html('');
+                $('#filter-categories .results').empty();
                 $.each(response, function (index, category) {
-                    var html = this.getFilterHtml(category);
-                    $('#filter-categories .results').append(html);
+                    $('#filter-categories .results')
+                        .append(this.getFilterHtml(category))
+                        .append($('<hr/>'));
                 }.bind(this));
 
                 if (response.length === 0) {
-                    $('#filter-categories .results').html('<em>' + EALang.no_records_found + '</em>');
+                    $('#filter-categories .results').append(
+                        $('<em/>', {
+                            'text': EALang.no_records_found
+                        })
+                    );
                 } else if (response.length === this.filterLimit) {
                     $('<button/>', {
                         'type': 'button',
@@ -319,12 +324,16 @@
      * @return {String} Returns the record HTML code.
      */
     CategoriesHelper.prototype.getFilterHtml = function (category) {
-        var html =
-            '<div class="category-row entry" data-id="' + category.id + '">' +
-            '<strong>' + category.name + '</strong>' +
-            '</div><hr>';
-
-        return html;
+        return $('<div/>', {
+            'class': 'category-row entry',
+            'data-id': category.id,
+            'html': [
+                $('<strong/>', {
+                    'text': category.name
+                }),
+                $('<br/>'),
+            ]
+        });
     };
 
     /**
diff --git a/assets/js/backend_customers_helper.js b/assets/js/backend_customers_helper.js
index 6b694ba9..e4b56213 100644
--- a/assets/js/backend_customers_helper.js
+++ b/assets/js/backend_customers_helper.js
@@ -330,13 +330,24 @@
 
             var start = GeneralFunctions.formatDate(Date.parse(appointment.start_datetime), GlobalVariables.dateFormat, true);
             var end = GeneralFunctions.formatDate(Date.parse(appointment.end_datetime), GlobalVariables.dateFormat, true);
-            var html =
-                '<div class="appointment-row" data-id="' + appointment.id + '">' +
-                start + ' - ' + end + '<br>' +
-                appointment.service.name + ', ' +
-                appointment.provider.first_name + ' ' + appointment.provider.last_name +
-                '</div>';
-            $('#customer-appointments').append(html);
+
+            $('<div/>', {
+                'class': 'appointment-row',
+                'data-id': appointment.id,
+                'html': [
+                    $('<span/>', {
+                        'text': start + ' - ' + end
+                    }),
+                    $('<br/>'),
+                    $('<span/>', {
+                        'text': appointment.service.name
+                    }),
+                    $('<span/>', {
+                        'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
+                    })
+                ]
+            })
+                .appendTo('#customer-appointments');
         });
 
         $('#appointment-details').empty();
@@ -365,14 +376,19 @@
             .done(function (response) {
                 this.filterResults = response;
 
-                $('#filter-customers .results').html('');
+                $('#filter-customers .results').empty();
                 $.each(response, function (index, customer) {
-                    var html = this.getFilterHtml(customer);
-                    $('#filter-customers .results').append(html);
+                    $('#filter-customers .results')
+                        .append(this.getFilterHtml(customer))
+                        .append($('<hr/>'));
                 }.bind(this));
 
                 if (!response.length) {
-                    $('#filter-customers .results').html('<em>' + EALang.no_records_found + '</em>');
+                    $('#filter-customers .results').append(
+                        $('<em/>', {
+                            'text': EALang.no_records_found
+                        })
+                    );
                 } else if (response.length === this.filterLimit) {
                     $('<button/>', {
                         'type': 'button',
@@ -403,18 +419,25 @@
      */
     CustomersHelper.prototype.getFilterHtml = function (customer) {
         var name = customer.first_name + ' ' + customer.last_name;
+
         var info = customer.email;
+
         info = customer.phone_number ? info + ', ' + customer.phone_number : info;
 
-        var html =
-            '<div class="entry" data-id="' + customer.id + '">' +
-            '<strong>' +
-            name +
-            '</strong><br>' +
-            info +
-            '</div><hr>';
-
-        return html;
+        return $('<div/>', {
+            'class': 'customer-row entry',
+            'data-id': customer.id,
+            'html': [
+                $('<strong/>', {
+                    'text': name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': info
+                }),
+                $('<br/>'),
+            ]
+        });
     };
 
     /**
@@ -459,15 +482,29 @@
         var end = GeneralFunctions.formatDate(Date.parse(appointment.end_datetime), GlobalVariables.dateFormat, true);
         var timezone = GlobalVariables.timezones[GlobalVariables.user.timezone];
 
-        var html =
-            '<div>' +
-            '<strong>' + appointment.service.name + '</strong><br>' +
-            appointment.provider.first_name + ' ' + appointment.provider.last_name + '<br>' +
-            start + ' - ' + end + '<br>' +
-            EALang.timezone + ': ' + timezone + '<br>' +
-            '</div>';
+        $('<div/>', {
+            'html': [
+                $('<strong/>', {
+                    'text': appointment.service.name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': EALang.timezone + ': ' + timezone
+                }),
+                $('<br/>')
+            ]
+        })
+            .appendTo('#appointment-details');
 
-        $('#appointment-details').html(html).removeClass('hidden');
+        $('#appointment-details').removeClass('hidden');
     };
 
     window.CustomersHelper = CustomersHelper;
diff --git a/assets/js/backend_services_helper.js b/assets/js/backend_services_helper.js
index ba2d3c6d..beaa24e0 100644
--- a/assets/js/backend_services_helper.js
+++ b/assets/js/backend_services_helper.js
@@ -72,12 +72,21 @@
 
             // Add dedicated provider link.
             var dedicatedUrl = GlobalVariables.baseUrl + '/index.php?service=' + encodeURIComponent(service.id);
-            var linkHtml = '<a href="' + dedicatedUrl + '"><span class="glyphicon glyphicon-link"></span></a>';
+
+            var $link = $('<a/>', {
+                'href': dedicatedUrl,
+                'html': [
+                    $('<span/>', {
+                        'class': 'glyphicon glyphicon-link'
+                    })
+                ]
+            });
+
             $('#services .record-details h3')
                 .find('a')
                 .remove()
                 .end()
-                .append(linkHtml);
+                .append($link);
 
             instance.display(service);
             $('#filter-services .selected').removeClass('selected');
@@ -319,14 +328,19 @@
             .done(function (response) {
                 this.filterResults = response;
 
-                $('#filter-services .results').html('');
+                $('#filter-services .results').empty();
                 $.each(response, function (index, service) {
-                    var html = ServicesHelper.prototype.getFilterHtml(service);
-                    $('#filter-services .results').append(html);
+                    $('#filter-services .results')
+                        .append(ServicesHelper.prototype.getFilterHtml(service))
+                        .append( $('<hr/>'))
                 });
 
                 if (response.length === 0) {
-                    $('#filter-services .results').html('<em>' + EALang.no_records_found + '</em>');
+                    $('#filter-services .results').append(
+                        $('<em/>', {
+                            'text': EALang.no_records_found
+                        })
+                    );
                 } else if (response.length === this.filterLimit) {
                     $('<button/>', {
                         'type': 'button',
@@ -357,14 +371,24 @@
      * @return {String} The HTML code that represents the record on the filter results list.
      */
     ServicesHelper.prototype.getFilterHtml = function (service) {
-        var html =
-            '<div class="service-row entry" data-id="' + service.id + '">' +
-            '<strong>' + service.name + '</strong><br>' +
-            service.duration + ' min - ' +
-            service.price + ' ' + service.currency + '<br>' +
-            '</div><hr>';
+        var name = service.name;
 
-        return html;
+        var info = service.duration + ' min - ' + service.price + ' ' + service.currency;
+
+        return $('<div/>', {
+            'class': 'service-row entry',
+            'data-id': service.id,
+            'html': [
+                $('<strong/>', {
+                    'text': name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': info
+                }),
+                $('<br/>')
+            ]
+        });
     };
 
     /**
diff --git a/assets/js/backend_users.js b/assets/js/backend_users.js
index 7772f328..e8fbcc54 100644
--- a/assets/js/backend_users.js
+++ b/assets/js/backend_users.js
@@ -62,33 +62,47 @@ window.BackendUsers = window.BackendUsers || {};
         helper.bindEventHandlers();
 
         // Fill the services and providers list boxes.
-        var html = '<div>';
-        $.each(GlobalVariables.services, function (index, service) {
-            html +=
-                '<div class="checkbox">' +
-                '<label class="checkbox">' +
-                '<input type="checkbox" data-id="' + service.id + '" />' +
-                service.name +
-                '</label>' +
-                '</div>';
-
+        GlobalVariables.services.forEach(function(service) {
+            $('<div/>', {
+                'class': 'checkbox',
+                'html': [
+                    $('<label/>', {
+                        'class': 'checkbox',
+                        'html': [
+                            $('<input/>', {
+                                'type': 'checkbox',
+                                'data-id': service.id
+                            }),
+                            $('<span/>', {
+                                'text': service.name
+                            })
+                        ]
+                    })
+                ]
+            })
+                .appendTo('#provider-services');
         });
-        html += '</div>';
-        $('#provider-services').html(html);
-
-        html = '<div>';
-        $.each(GlobalVariables.providers, function (index, provider) {
-            html +=
-                '<div class="checkbox">' +
-                '<label class="checkbox">' +
-                '<input type="checkbox" data-id="' + provider.id + '" />' +
-                provider.first_name + ' ' + provider.last_name +
-                '</label>' +
-                '</div>';
 
+        GlobalVariables.providers.forEach(function(provider) {
+            $('<div/>', {
+                'class': 'checkbox',
+                'html': [
+                    $('<label/>', {
+                        'class': 'checkbox',
+                        'html': [
+                            $('<input/>', {
+                                'type': 'checkbox',
+                                'data-id': provider.id
+                            }),
+                            $('<span/>', {
+                                'text': provider.first_name + ' ' + provider.last_name
+                            })
+                        ]
+                    })
+                ]
+            })
+                .appendTo('#secretary-providers');
         });
-        html += '</div>';
-        $('#secretary-providers').html(html);
 
         $('#reset-working-plan').qtip({
             position: {
@@ -136,19 +150,29 @@ window.BackendUsers = window.BackendUsers || {};
                     .done(function (response) {
                         GlobalVariables.providers = response;
 
-                        var html = '<div>';
-                        $.each(GlobalVariables.providers, function (index, provider) {
-                            html +=
-                                '<div class="checkbox">' +
-                                '<label class="checkbox">' +
-                                '<input type="checkbox" data-id="' + provider.id + '" />' +
-                                provider.first_name + ' ' + provider.last_name +
-                                '</label>' +
-                                '</div>';
+                        GlobalVariables.providers.forEach(function(provider) {
+                            $('<div/>', {
+                                'class': 'checkbox',
+                                'html': [
+                                    $('<label/>', {
+                                        'class': 'checkbox',
+                                        'html': [
+                                            $('<input/>', {
+                                                'type': 'checkbox',
+                                                'data-id': provider.id,
+                                                'prop': {
+                                                    'disabled': true
+                                                }
+                                            }),
+                                            $('<span/>', {
+                                                'text': provider.first_name + ' ' + provider.last_name
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                                .appendTo('#secretary-providers');
                         });
-                        html += '</div>';
-                        $('#secretary-providers').html(html);
-                        $('#secretary-providers input:checkbox').prop('disabled', true);
                     })
                     .fail(GeneralFunctions.ajaxFailureHandler);
             }
diff --git a/assets/js/backend_users_admins.js b/assets/js/backend_users_admins.js
index 84ee7a88..64f44323 100644
--- a/assets/js/backend_users_admins.js
+++ b/assets/js/backend_users_admins.js
@@ -361,14 +361,19 @@
             .done(function (response) {
                 this.filterResults = response;
 
-                $('#filter-admins .results').html('');
+                $('#filter-admins .results').empty();
                 $.each(response, function (index, admin) {
-                    var html = this.getFilterHtml(admin);
-                    $('#filter-admins .results').append(html);
+                    $('#filter-admins .results')
+                        .append(this.getFilterHtml(admin))
+                        .append($('<hr/>'));
                 }.bind(this));
 
                 if (!response.length) {
-                    $('#filter-admins .results').html('<em>' + EALang.no_records_found + '</em>')
+                    $('#filter-admins .results').append(
+                        $('<em/>', {
+                            'text': EALang.no_records_found
+                        })
+                    );
                 } else if (response.length === this.filterLimit) {
                     $('<button/>', {
                         'type': 'button',
@@ -398,19 +403,27 @@
      */
     AdminsHelper.prototype.getFilterHtml = function (admin) {
         var name = admin.first_name + ' ' + admin.last_name;
+
         var info = admin.email;
 
         info = admin.mobile_number ? info + ', ' + admin.mobile_number : info;
 
         info = admin.phone_number ? info + ', ' + admin.phone_number : info;
 
-        var html =
-            '<div class="admin-row entry" data-id="' + admin.id + '">' +
-            '<strong>' + name + '</strong><br>' +
-            info + '<br>' +
-            '</div><hr>';
-
-        return html;
+        return $('<div/>', {
+            'class': 'admin-row entry',
+            'data-id': admin.id,
+            'html': [
+                $('<strong/>', {
+                    'text': name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': info
+                }),
+                $('<br/>'),
+            ]
+        });
     };
 
     /**
diff --git a/assets/js/backend_users_providers.js b/assets/js/backend_users_providers.js
index 4b7e1057..e34dc253 100755
--- a/assets/js/backend_users_providers.js
+++ b/assets/js/backend_users_providers.js
@@ -403,12 +403,21 @@
 
         // Add dedicated provider link.
         var dedicatedUrl = GlobalVariables.baseUrl + '/index.php?provider=' + encodeURIComponent(provider.id);
-        var linkHtml = '<a href="' + dedicatedUrl + '"><span class="glyphicon glyphicon-link"></span></a>';
+
+        var $link = $('<a/>', {
+            'href': dedicatedUrl,
+            'html': [
+                $('<span/>', {
+                    'class': 'glyphicon glyphicon-link'
+                })
+            ]
+        });
+
         $('#providers .details-view h3')
             .find('a')
             .remove()
             .end()
-            .append(linkHtml);
+            .append($link);
 
         $('#provider-services a').remove();
         $('#provider-services input:checkbox').prop('checked', false);
@@ -419,8 +428,17 @@
                     // Add dedicated service-provider link.
                     dedicatedUrl = GlobalVariables.baseUrl + '/index.php?provider=' + encodeURIComponent(provider.id)
                         + '&service=' + encodeURIComponent(serviceId);
-                    linkHtml = '<a href="' + dedicatedUrl + '"><span class="glyphicon glyphicon-link"></span></a>';
-                    $(this).parent().append(linkHtml);
+
+                    $link = $('<a/>', {
+                        'href': dedicatedUrl,
+                        'html': [
+                            $('<span/>', {
+                                'class': 'glyphicon glyphicon-link'
+                            })
+                        ]
+                    });
+
+                    $(this).parent().append($link);
                 }
             });
         });
@@ -457,14 +475,19 @@
             .done(function (response) {
                 this.filterResults = response;
 
-                $('#filter-providers .results').html('');
+                $('#filter-providers .results').empty();
                 $.each(response, function (index, provider) {
-                    var html = this.getFilterHtml(provider);
-                    $('#filter-providers .results').append(html);
+                    $('#filter-providers .results')
+                        .append(this.getFilterHtml(provider))
+                        .append($('<hr/>'));
                 }.bind(this));
 
                 if (!response.length) {
-                    $('#filter-providers .results').html('<em>' + EALang.no_records_found + '</em>')
+                    $('#filter-providers .results').append(
+                        $('<em/>', {
+                            'text': EALang.no_records_found
+                        })
+                    );
                 } else if (response.length === this.filterLimit) {
                     $('<button/>', {
                         'type': 'button',
@@ -493,20 +516,28 @@
      * @return {String} The html code that represents the record on the filter results list.
      */
     ProvidersHelper.prototype.getFilterHtml = function (provider) {
-        var name = provider.first_name + ' ' + provider.last_name,
-            info = provider.email;
+        var name = provider.first_name + ' ' + provider.last_name;
+
+        var info = provider.email;
 
         info = provider.mobile_number ? info + ', ' + provider.mobile_number : info;
 
         info = provider.phone_number ? info + ', ' + provider.phone_number : info;
 
-        var html =
-            '<div class="provider-row entry" data-id="' + provider.id + '">' +
-            '<strong>' + name + '</strong><br>' +
-            info + '<br>' +
-            '</div><hr>';
-
-        return html;
+        return $('<div/>', {
+            'class': 'provider-row entry',
+            'data-id': provider.id,
+            'html': [
+                $('<strong/>', {
+                    'text': name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': info
+                }),
+                $('<br/>'),
+            ]
+        });
     };
 
     /**
diff --git a/assets/js/backend_users_secretaries.js b/assets/js/backend_users_secretaries.js
index be1d9e34..e42d2e67 100644
--- a/assets/js/backend_users_secretaries.js
+++ b/assets/js/backend_users_secretaries.js
@@ -203,7 +203,7 @@
     /**
      * Save secretary record to database.
      *
-     * @param {Object} secretary Contains the admin record data. If an 'id' value is provided
+     * @param {Object} secretary Contains the secretary record data. If an 'id' value is provided
      * then the update operation is going to be executed.
      */
     SecretariesHelper.prototype.save = function (secretary) {
@@ -304,7 +304,7 @@
     };
 
     /**
-     * Resets the admin tab form back to its initial state.
+     * Resets the secretary tab form back to its initial state.
      */
     SecretariesHelper.prototype.resetForm = function () {
         $('#secretaries .record-details').find('input, textarea').val('');
@@ -326,7 +326,7 @@
     };
 
     /**
-     * Display a secretary record into the admin form.
+     * Display a secretary record into the secretary form.
      *
      * @param {Object} secretary Contains the secretary record data.
      */
@@ -385,14 +385,19 @@
             .done(function (response) {
                 this.filterResults = response;
 
-                $('#filter-secretaries .results').html('');
+                $('#filter-secretaries .results').empty();
                 $.each(response, function (index, secretary) {
-                    var html = this.getFilterHtml(secretary);
-                    $('#filter-secretaries .results').append(html);
+                    $('#filter-secretaries .results')
+                        .append(this.getFilterHtml(secretary))
+                        .append($('<hr/>'));
                 }.bind(this));
 
                 if (!response.length) {
-                    $('#filter-secretaries .results').html('<em>' + EALang.no_records_found + '</em>')
+                    $('#filter-secretaries .results').append(
+                        $('<em/>', {
+                            'text': EALang.no_records_found
+                        })
+                    );
                 } else if (response.length === this.filterLimit) {
                     $('<button/>', {
                         'type': 'button',
@@ -422,19 +427,27 @@
      */
     SecretariesHelper.prototype.getFilterHtml = function (secretary) {
         var name = secretary.first_name + ' ' + secretary.last_name;
+
         var info = secretary.email;
 
         info = secretary.mobile_number ? info + ', ' + secretary.mobile_number : info;
 
         info = secretary.phone_number ? info + ', ' + secretary.phone_number : info;
 
-        var html =
-            '<div class="secretary-row entry" data-id="' + secretary.id + '">' +
-            '<strong>' + name + '</strong><br>' +
-            info + '<br>' +
-            '</div><hr>';
-
-        return html;
+        return $('<div/>', {
+            'class': 'secretary-row entry',
+            'data-id': secretary.id,
+            'html': [
+                $('<strong/>', {
+                    'text': name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': info
+                }),
+                $('<br/>'),
+            ]
+        });
     };
 
     /**
@@ -457,9 +470,9 @@
         });
 
         if (display) {
-            $.each(this.filterResults, function (index, admin) {
-                if (Number(admin.id) === Number(id)) {
-                    this.display(admin);
+            $.each(this.filterResults, function (index, secretary) {
+                if (Number(secretary.id) === Number(id)) {
+                    this.display(secretary);
                     $('#edit-secretary, #delete-secretary').prop('disabled', false);
                     return false;
                 }
diff --git a/assets/js/frontend_book.js b/assets/js/frontend_book.js
index 3f8d9876..13c2e3ed 100644
--- a/assets/js/frontend_book.js
+++ b/assets/js/frontend_book.js
@@ -253,7 +253,7 @@ window.FrontendBook = window.FrontendBook || {};
             FrontendBookApi.getUnavailableDates($('#select-provider').val(), $(this).val(),
                 $('#select-date').datepicker('getDate').toString('yyyy-MM-dd'));
             FrontendBook.updateConfirmFrame();
-            updateServiceDescription($('#select-service').val(), $('#service-description'));
+            updateServiceDescription(serviceId);
         });
 
         /**
@@ -520,25 +520,43 @@ window.FrontendBook = window.FrontendBook || {};
         var servicePrice = '';
         var serviceCurrency = '';
 
-        $.each(GlobalVariables.availableServices, function (index, service) {
+        GlobalVariables.availableServices.forEach(function (service, index) {
 			if (Number(service.id) === Number(serviceId) && Number(service.price) > 0) {
-                servicePrice = '<br>' + service.price;
+                servicePrice = service.price;
                 serviceCurrency = service.currency;
                 return false; // break loop
             }
         });
 
-        var html =
-            '<h4>' + $('#select-service option:selected').text() + '</h4>' +
-            '<p>'
-            + '<strong class="text-primary">'
-            + $('#select-provider option:selected').text() + '<br>'
-            + selectedDate + ' ' + $('.selected-hour').text() + '<br>' + $('#select-timezone option:selected').text()
-            + servicePrice + ' ' + serviceCurrency
-            + '</strong>' +
-            '</p>';
-
-        $('#appointment-details').html(html);
+        $('<div/>', {
+            'html': [
+                $('<h4/>', {
+                    'text': $('#select-service option:selected').text()
+                }),
+                $('<p/>', {
+                    'html': [
+                        $('<strong/>', {
+                            'class': 'text-primary',
+                            'html': [
+                                $('<span/>', {
+                                    'text': $('#select-provider option:selected').text()
+                                }),
+                                $('<br/>'),
+                                $('<span/>', {
+                                    'text': selectedDate + ' ' + $('.selected-hour').text()
+                                }),
+                                $('<br/>'),
+                                $('<span/>', {
+                                    'text': $('#select-timezone option:selected').text()
+                                        + servicePrice + ' ' + serviceCurrency
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+            .appendTo('#appointment-details');
 
         // Customer Details
         var firstName = GeneralFunctions.escapeHtml($('#first-name').val());
@@ -549,24 +567,41 @@ window.FrontendBook = window.FrontendBook || {};
         var city = GeneralFunctions.escapeHtml($('#city').val());
         var zipCode = GeneralFunctions.escapeHtml($('#zip-code').val());
 
-        html =
-            '<h4>' + firstName + ' ' + lastName + '</h4>' +
-            '<p>' +
-            EALang.phone_number + ': ' + phoneNumber +
-            '<br/>' +
-            EALang.email + ': ' + email +
-            '<br/>' +
-            EALang.address + ': ' + address +
-            '<br/>' +
-            EALang.city + ': ' + city +
-            '<br/>' +
-            EALang.zip_code + ': ' + zipCode +
-            '</p>';
+        $('<div/>', {
+            'html': [
+                $('<h4/>)', {
+                    'text': firstName + ' ' + lastName
+                }),
+                $('<p/>', {
+                    'html': [
+                        $('<span/>', {
+                            'text': EALang.phone_number + ': ' + phoneNumber
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.email + ': ' + email
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.address + ': ' + address
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.city + ': ' + city
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.zip_code + ': ' + zipCode
+                        }),
+                        $('<br/>'),
+                    ]
+                })
+            ]
+        })
+            .appendTo('#customer-details');
 
-        $('#customer-details').html(html);
 
-        // Update appointment form data for submission to server when the user confirms
-        // the appointment.
+        // Update appointment form data for submission to server when the user confirms the appointment.
         var data = {};
 
         data.customer = {
@@ -680,41 +715,58 @@ window.FrontendBook = window.FrontendBook || {};
      * customers upon selecting the correct service.
      *
      * @param {Number} serviceId The selected service record id.
-     * @param {Object} $div The destination div jquery object (e.g. provide $('#div-id')
-     * object as value).
      */
-    function updateServiceDescription(serviceId, $div) {
-        var html = '';
+    function updateServiceDescription(serviceId) {
+        var $serviceDescription = $('#service-description');
 
-        $.each(GlobalVariables.availableServices, function (index, service) {
-            if (Number(service.id) === Number(serviceId)) {
-                html = '<strong>' + service.name + ' </strong>';
+        $serviceDescription.empty();
 
-                if (service.description) {
-                    html += '<br>' + service.description + '<br>';
-                }
+        var service = GlobalVariables.availableServices.filter(function(availableService) {
+            return Number(availableService.id) === Number(serviceId);
+        }).shift();
 
-                if (service.duration) {
-                    html += '[' + EALang.duration + ' ' + service.duration + ' ' + EALang.minutes + ']';
-                }
+        if (!service) {
+            return;
+        }
 
-				if (Number(service.price) > 0) {
-                    html += '[' + EALang.price + ' ' + service.price + ' ' + service.currency + ']';
-                }
+        $('<strong/>', {
+            'text': service.name
+        })
+            .appendTo($serviceDescription);
 
-                if (service.location) {
-                    html += '[' + EALang.location + ' ' + service.location + ']';
-                }
+        if (service.description) {
+            $('<br/>')
+                .appendTo($serviceDescription);
 
-                html += '<br>';
+            $('<span/>', {
+                'text': service.description
+            })
+                .appendTo($serviceDescription);
 
-                return false;
-            }
-        });
+            $('<br/>')
+                .appendTo($serviceDescription);
+        }
 
-        $div
-            .html(html)
-            .toggle(html);
+        if (service.duration) {
+            $('<span/>', {
+                'text': '[' + EALang.duration + ' ' + service.duration + ' ' + EALang.minutes + ']'
+            })
+                .appendTo($serviceDescription);
+        }
+
+        if (Number(service.price) > 0) {
+            $('<span/>', {
+                'text': '[' + EALang.price + ' ' + service.price + ' ' + service.currency + ']'
+            })
+                .appendTo($serviceDescription);
+        }
+
+        if (service.location) {
+            $('<span/>', {
+                'text': '[' + EALang.location + ' ' + service.location + ']'
+            })
+                .appendTo($serviceDescription);
+        }
     }
 
 })(window.FrontendBook);
diff --git a/assets/js/frontend_book_api.js b/assets/js/frontend_book_api.js
index bd7ce4ce..f606cce4 100755
--- a/assets/js/frontend_book_api.js
+++ b/assets/js/frontend_book_api.js
@@ -90,24 +90,43 @@ window.FrontendBookApi = window.FrontendBookApi || {};
 
                     var selectedTimezone = $('#select-timezone').val();
 
-                    var currColumn = 1;
+                    var currentColumn = 1;
 
-                    $('#available-hours').html('<div style="width:80px; float:left;"></div>');
+                    $('#available-hours').html(
+                        $('<div/>', {
+                            'css': {
+                                'width': '80px',
+                                'float': 'left'
+                            }
+                        })
+                    );
 
                     var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm';
 
                     response.forEach(function (availableHour, index) {
-                        if ((currColumn * 10) < (index + 1)) {
-                            currColumn++;
-                            $('#available-hours').append('<div style="width:80px; float:left;"></div>');
+                        if ((currentColumn * 10) < (index + 1)) {
+                            currentColumn++;
+                            $('#available-hours').append(
+                                $('<div/>', {
+                                    'css': {
+                                        'width': '80px',
+                                        'float': 'left'
+                                    }
+                                })
+                            );
                         }
 
                         var availableHourMoment = moment
                             .tz(selDate + ' ' + availableHour + ':00', providerTimezone)
                             .tz(selectedTimezone);
 
-                        $('#available-hours div:eq(' + (currColumn - 1) + ')').append(
-                            '<span class="available-hour">' + availableHourMoment.format(timeFormat) + '</span><br/>');
+                        $('#available-hours div:eq(' + (currentColumn - 1) + ')').append(
+                            $('<span/>', {
+                                'class': 'available-hour',
+                                'text': availableHourMoment.format(timeFormat)
+                            }),
+                            $('<br/>')
+                        );
                     });
 
                     if (FrontendBook.manageMode) {
diff --git a/assets/js/frontend_book_success.js b/assets/js/frontend_book_success.js
index e2a82c81..14c9cf7a 100644
--- a/assets/js/frontend_book_success.js
+++ b/assets/js/frontend_book_success.js
@@ -83,17 +83,22 @@ $(document).ready(function () {
                     }
 
                     $('#success-frame').append(
-                        '<br><br>' +
-                        '<div class="alert alert-success col-xs-12">' +
-                        '<h4>' + EALang.success + '</h4>' +
-                        '<p>' +
-                        EALang.appointment_added_to_google_calendar +
-                        '<br>' +
-                        '<a href="' + response.htmlLink + '" target="_blank">' +
-                        EALang.view_appointment_in_google_calendar +
-                        '</a>' +
-                        '</p>' +
-                        '</div>'
+                        $('<br/>'),
+                        $('<div/>', {
+                            'class': 'alert alert-success col-xs-12',
+                            'html': [
+                                $('<h4/>', {
+                                    'text': EALang.success
+                                }),
+                                $('<p/>', {
+                                    'text': EALang.appointment_added_to_google_calendar
+                                }),
+                                $('<a/>', {
+                                    'href': response.htmlLink,
+                                    'text': EALang.view_appointment_in_google_calendar
+                                })
+                            ]
+                        })
                     );
                     $('#add-to-google-calendar').hide();
                 });
@@ -101,13 +106,22 @@ $(document).ready(function () {
         } catch (error) {
             // The user denied access or something else happened, display corresponding message on the screen.
             $('#success-frame').append(
-                '<div class="alert alert-danger col-xs-12">' +
-                '<h4>' + EALang.oops_something_went_wrong + '</h4>' +
-                '<p>' +
-                EALang.could_not_add_to_google_calendar +
-                '<pre>' + error.message + '</pre>' +
-                '</p>' +
-                '</div>');
+                $('<br/>'),
+                $('<div/>', {
+                    'class': 'alert alert-danger col-xs-12',
+                    'html': [
+                        $('<h4/>', {
+                            'text': EALang.oops_something_went_wrong
+                        }),
+                        $('<p/>', {
+                            'text': EALang.could_not_add_to_google_calendar
+                        }),
+                        $('<pre/>', {
+                            'text': error.message
+                        }),
+                    ]
+                })
+            );
         }
     }
 });
diff --git a/assets/js/general_functions.js b/assets/js/general_functions.js
index b1ce8c43..bba87c8b 100755
--- a/assets/js/general_functions.js
+++ b/assets/js/general_functions.js
@@ -222,41 +222,6 @@ window.GeneralFunctions = window.GeneralFunctions || {};
         return re.test(email);
     };
 
-    /**
-     * Convert AJAX exceptions to HTML.
-     *
-     * This method returns the exception HTML display for javascript ajax calls. It uses the Bootstrap collapse
-     * module to show exception messages when the user opens the "Details" collapse component.
-     *
-     * @param {Array} exceptions Contains the exceptions to be displayed.
-     *
-     * @return {String} Returns the html markup for the exceptions.
-     */
-    exports.exceptionsToHtml = function (exceptions) {
-        var html =
-            '<div class="accordion" id="error-accordion">' +
-            '<div class="accordion-group">' +
-            '<div class="accordion-heading">' +
-            '<button class="accordion-toggle btn btn-default btn-xs" data-toggle="collapse" ' +
-            'data-parent="#error-accordion" href="#error-technical">' +
-            EALang.details +
-            '</button>' +
-            '</div>' +
-            '<br>';
-
-        $.each(exceptions, function (index, exception) {
-            html +=
-                '<div id="error-technical" class="accordion-body collapse">' +
-                '<div class="accordion-inner">' +
-                '<pre>' + exception.message + '</pre>' +
-                '</div>' +
-                '</div>';
-        });
-
-        html += '</div></div>';
-
-        return html;
-    };
 
     /**
      * Makes the first letter of the string upper case.
diff --git a/assets/js/working_plan.js b/assets/js/working_plan.js
index 896e79f5..2ad7adca 100755
--- a/assets/js/working_plan.js
+++ b/assets/js/working_plan.js
@@ -52,28 +52,59 @@
         $('.breaks tbody').empty();
 
         // Build working plan day list starting with the first weekday as set in the General settings
-        $.each(workingPlanSorted, function (index, workingDay) {
+        var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
 
+        $.each(workingPlanSorted, function (index, workingDay) {
             var day = this.convertValueToDay(index);
+
             var dayTranslatedName = GeneralFunctions.upperCaseFirstLetter(day)
 
-            var tr =
-                '<tr>' +
-                '<td>' +
-                '<div class="checkbox">' +
-                '<label> <input type="checkbox" id="' + index + '">' + dayTranslatedName + '</label>' +
-                '</div>' +
-                '</td>' +
-                '<td><input id="'+index+'-start" class="work-start form-control input-sm"></td>' +
-                '<td><input id="'+index+'-end" class="work-end form-control input-sm"></td>' +
-                '</tr>';
-
-            $('.working-plan tbody').append(tr);
+            $('<tr/>', {
+                'html': [
+                    $('<td/>', {
+                        'html': [
+                            $('<div/>', {
+                                'class': 'checkbox',
+                                'html': [
+                                    $('<label/>', {
+                                        'html': [
+                                            $('<input/>', {
+                                                'type': 'checkbox',
+                                                'id': index,
+                                            }),
+                                            $('<span/>', {
+                                                'text': dayTranslatedName
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    $('<td/>', {
+                        'html': [
+                            $('<input/>', {
+                                'id': index + '-start',
+                                'class': 'work-start form-control input-sm'
+                            })
+                        ]
+                    }),
+                    $('<td/>', {
+                        'html': [
+                            $('<input/>', {
+                                'id': index + '-end',
+                                'class': 'work-start form-control input-sm'
+                            })
+                        ]
+                    })
+                ]
+            })
+                .appendTo('.working-plan tbody');
 
             if (workingDay) {
                 $('#' + index).prop('checked', true);
-                $('#' + index + '-start').val(Date.parse(workingDay.start).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase());
-                $('#' + index + '-end').val(Date.parse(workingDay.end).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase());
+                $('#' + index + '-start').val(Date.parse(workingDay.start).toString(timeFormat).toUpperCase());
+                $('#' + index + '-end').val(Date.parse(workingDay.end).toString(timeFormat).toUpperCase());
 
                 // Sort day's breaks according to the starting hour
                 workingDay.breaks.sort(function (break1, break2) {
@@ -82,30 +113,83 @@
                     });
 
                 // Add the day's breaks on the breaks table.
-                $.each(workingDay.breaks, function (i, brk) {
+                var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
 
-                    tr =
-                        '<tr>' +
-                        '<td class="break-day editable">' + dayTranslatedName + '</td>' +
-                        '<td class="break-start editable">' + Date.parse(brk.start).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase() + '</td>' +
-                        '<td class="break-end editable">' + Date.parse(brk.end).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase() + '</td>' +
-                        '<td>' +
-                        '<button type="button" class="btn btn-default btn-sm edit-break" title="' + EALang.edit + '">' +
-                        '<span class="glyphicon glyphicon-pencil"></span>' +
-                        '</button>' +
-                        '<button type="button" class="btn btn-default btn-sm delete-break" title="' + EALang.delete + '">' +
-                        '<span class="glyphicon glyphicon-remove"></span>' +
-                        '</button>' +
-                        '<button type="button" class="btn btn-default btn-sm save-break hidden" title="' + EALang.save + '">' +
-                        '<span class="glyphicon glyphicon-ok"></span>' +
-                        '</button>' +
-                        '<button type="button" class="btn btn-default btn-sm cancel-break hidden" title="' + EALang.cancel + '">' +
-                        '<span class="glyphicon glyphicon-ban-circle"></span>' +
-                        '</button>' +
-                        '</td>' +
-                        '</tr>';
-                    $('.breaks tbody').append(tr);
-                }.bind(this));
+                workingDay.breaks.forEach(function(workingDayBreak, index) {
+                    $('<tr/>', {
+                        'html': [
+                            $('<td/>', {
+                                'class': 'break-day editable',
+                                'text': dayTranslatedName
+                            }),
+                            $('<td/>', {
+                                'class': 'break-start editable',
+                                'text': Date.parse(workingDayBreak.start).toString(timeFormat).toUpperCase()
+                            }),
+                            $('<td/>', {
+                                'class': 'break-end editable',
+                                'text': Date.parse(workingDayBreak.end).toString(timeFormat).toUpperCase()
+                            }),
+                            $('<td/>', {
+                                'html': [
+                                    $('<button/>', {
+                                        'type': 'button',
+                                        'class': 'btn btn-default btn-sm edit-break',
+                                        'title': EALang.edit,
+                                        'html': [
+                                            $('<span/>', {
+                                                'class': 'glyphicon glyphicon-pencil'
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            $('<td/>', {
+                                'html': [
+                                    $('<button/>', {
+                                        'type': 'button',
+                                        'class': 'btn btn-default btn-sm delete-break',
+                                        'title': EALang.delete,
+                                        'html': [
+                                            $('<span/>', {
+                                                'class': 'glyphicon glyphicon-trash'
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            $('<td/>', {
+                                'html': [
+                                    $('<button/>', {
+                                        'type': 'button',
+                                        'class': 'btn btn-default btn-sm save-break hidden',
+                                        'title': EALang.save,
+                                        'html': [
+                                            $('<span/>', {
+                                                'class': 'glyphicon glyphicon-ok'
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            $('<td/>', {
+                                'html': [
+                                    $('<button/>', {
+                                        'type': 'button',
+                                        'class': 'btn btn-default btn-sm cancel-break hidden',
+                                        'title': EALang.cancel,
+                                        'html': [
+                                            $('<span/>', {
+                                                'class': 'glyphicon glyphicon-ban-circle'
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                        .appendTo('.breaks tbody');
+                });
             } else {
                 $('#' + index).prop('checked', false);
                 $('#' + index + '-start').prop('disabled', true);
@@ -133,27 +217,81 @@
 
                 var day = GeneralFunctions.formatDate(Date.parse(index), GlobalVariables.dateFormat, false);
 
-                var tr =
-                    '<tr>' +
-                    '<td class="extra-day editable">' + day + '</td>' +
-                    '<td class="extra-start editable">' + Date.parse(extraWorkingDay.start).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase().toUpperCase() + '</td>' +
-                    '<td class="extra-end editable">' + Date.parse(extraWorkingDay.end).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase().toUpperCase() + '</td>' +
-                    '<td>' +
-                    '<button type="button" class="btn btn-default btn-sm edit-extra" title="' + EALang.edit + '">' +
-                    '<span class="glyphicon glyphicon-pencil"></span>' +
-                    '</button>' +
-                    '<button type="button" class="btn btn-default btn-sm delete-extra" title="' + EALang.delete + '">' +
-                    '<span class="glyphicon glyphicon-remove"></span>' +
-                    '</button>' +
-                    '<button type="button" class="btn btn-default btn-sm save-extra hidden" title="' + EALang.save + '">' +
-                    '<span class="glyphicon glyphicon-ok"></span>' +
-                    '</button>' +
-                    '<button type="button" class="btn btn-default btn-sm cancel-extra hidden" title="' + EALang.cancel + '">' +
-                    '<span class="glyphicon glyphicon-ban-circle"></span>' +
-                    '</button>' +
-                    '</td>' +
-                    '</tr>';
-                $('.extra-periods tbody').append(tr);
+                var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
+
+                $('<tr/>', {
+                    'html': [
+                        $('<td/>', {
+                            'class': 'extra-day editable',
+                            'text': day
+                        }),
+                        $('<td/>', {
+                            'class': 'extra-start editable',
+                            'text': Date.parse(extraWorkingDay.start).toString(timeFormat).toUpperCase()
+                        }),
+                        $('<td/>', {
+                            'class': 'extra-end editable',
+                            'text': Date.parse(extraWorkingDay.end).toString(timeFormat).toUpperCase()
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm edit-extra',
+                                    'title': EALang.edit,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-pencil'
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm delete-extra',
+                                    'title': EALang.delete,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-trash'
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm save-extra hidden',
+                                    'title': EALang.save,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-ok'
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm cancel-extra hidden',
+                                    'title': EALang.cancel,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-ban-circle'
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+                    .appendTo('.extra-periods tbody');
             } else {
                 $('#' + index).prop('checked', false);
                 $('#' + index + '-start').prop('disabled', true);
@@ -220,8 +358,20 @@
         }, {
             event: 'edit',
             height: '30px',
-            submit: '<button type="button" class="hidden submit-editable">Submit</button>',
-            cancel: '<button type="button" class="hidden cancel-editable">Cancel</button>',
+            submit: $('<button/>', {
+                'type': 'button',
+                'class': 'hidden submit-editable',
+                'text': EALang.save
+            })
+                .get(0)
+                .outerHTML,
+            cancel: $('<button/>', {
+                'type': 'button',
+                'class': 'hidden cancek-editable',
+                'text': EALang.cancel
+            })
+                .get(0)
+                .outerHTML,
             onblur: 'ignore',
             onreset: function (settings, td) {
                 if (!this.enableCancel) {
@@ -264,33 +414,86 @@
          * data. After that he can either press the save or cancel button.
          */
         $('.add-break').click(function () {
-            var tr =
-                '<tr>' +
-                '<td class="break-day editable">' + EALang.sunday + '</td>' +
-                '<td class="break-start editable">9:00 AM</td>' +
-                '<td class="break-end editable">10:00 AM</td>' +
-                '<td>' +
-                '<button type="button" class="btn btn-default btn-sm edit-break" title="' + EALang.edit + '">' +
-                '<span class="glyphicon glyphicon-pencil"></span>' +
-                '</button>' +
-                '<button type="button" class="btn btn-default btn-sm delete-break" title="' + EALang.delete + '">' +
-                '<span class="glyphicon glyphicon-remove"></span>' +
-                '</button>' +
-                '<button type="button" class="btn btn-default btn-sm save-break hidden" title="' + EALang.save + '">' +
-                '<span class="glyphicon glyphicon-ok"></span>' +
-                '</button>' +
-                '<button type="button" class="btn btn-default btn-sm cancel-break hidden" title="' + EALang.cancel + '">' +
-                '<span class="glyphicon glyphicon-ban-circle"></span>' +
-                '</button>' +
-                '</td>' +
-                '</tr>';
-            $('.breaks').prepend(tr);
+            var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
+
+                var $newBreak = $('<tr/>', {
+                    'html': [
+                        $('<td/>', {
+                            'class': 'break-day editable',
+                            'text': EALang.sunday
+                        }),
+                        $('<td/>', {
+                            'class': 'break-start editable',
+                            'text': '9:00 AM'
+                        }),
+                        $('<td/>', {
+                            'class': 'break-end editable',
+                            'text': '10:00 AM'
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm edit-break',
+                                    'title': EALang.edit,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-pencil'
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm delete-break',
+                                    'title': EALang.delete,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-trash'
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm save-break hidden',
+                                    'title': EALang.save,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-ok'
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        $('<td/>', {
+                            'html': [
+                                $('<button/>', {
+                                    'type': 'button',
+                                    'class': 'btn btn-default btn-sm cancel-break hidden',
+                                    'title': EALang.cancel,
+                                    'html': [
+                                        $('<span/>', {
+                                            'class': 'glyphicon glyphicon-ban-circle'
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+                    .appendTo('.breaks tbody');
 
             // Bind editable and event handlers.
-            tr = $('.breaks tr')[1];
-            this.editableBreakDay($(tr).find('.break-day'));
-            this.editableBreakTime($(tr).find('.break-start, .break-end'));
-            $(tr).find('.edit-break').trigger('click');
+            this.editableBreakDay($newBreak.find('.break-day'));
+            this.editableBreakTime($newBreak.find('.break-start, .break-end'));
+            $newBreak.find('.edit-break').trigger('click');
             $('.add-break').prop('disabled', true);
         }.bind(this));
 
@@ -397,33 +600,87 @@
          */
         $('.add-extra-periods').click(function () {
             var today = GeneralFunctions.formatDate(new Date(), GlobalVariables.dateFormat, false);
-            var tr =
-                '<tr>' +
-                '<td class="extra-day editable">' + today + '</td>' +
-                '<td class="extra-start editable">' + (GlobalVariables.timeFormat === 'regular' ? '9:00 AM' : '09:00').toUpperCase() + '</td>' +
-                '<td class="extra-end editable">' + (GlobalVariables.timeFormat === 'regular' ? '10:00 AM' : '10:00').toUpperCase() + '</td>' +
-                '<td>' +
-                '<button type="button" class="btn btn-default btn-sm edit-extra" title="' + EALang.edit + '">' +
-                '<span class="glyphicon glyphicon-pencil"></span>' +
-                '</button>' +
-                '<button type="button" class="btn btn-default btn-sm delete-extra" title="' + EALang.delete + '">' +
-                '<span class="glyphicon glyphicon-remove"></span>' +
-                '</button>' +
-                '<button type="button" class="btn btn-default btn-sm save-extra hidden" title="' + EALang.save + '">' +
-                '<span class="glyphicon glyphicon-ok"></span>' +
-                '</button>' +
-                '<button type="button" class="btn btn-default btn-sm cancel-extra hidden" title="' + EALang.cancel + '">' +
-                '<span class="glyphicon glyphicon-ban-circle"></span>' +
-                '</button>' +
-                '</td>' +
-                '</tr>';
-            $('.extra-periods').prepend(tr);
+
+            var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
+
+            var $newExtraPeriod = $('<tr/>', {
+                'html': [
+                    $('<td/>', {
+                        'class': 'extra-day editable',
+                        'text': today
+                    }),
+                    $('<td/>', {
+                        'class': 'extra-start editable',
+                        'text': '9:00 AM'
+                    }),
+                    $('<td/>', {
+                        'class': 'extra-end editable',
+                        'text': '10:00 AM'
+                    }),
+                    $('<td/>', {
+                        'html': [
+                            $('<button/>', {
+                                'type': 'button',
+                                'class': 'btn btn-default btn-sm edit-extra',
+                                'title': EALang.edit,
+                                'html': [
+                                    $('<span/>', {
+                                        'class': 'glyphicon glyphicon-pencil'
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    $('<td/>', {
+                        'html': [
+                            $('<button/>', {
+                                'type': 'button',
+                                'class': 'btn btn-default btn-sm delete-extra',
+                                'title': EALang.delete,
+                                'html': [
+                                    $('<span/>', {
+                                        'class': 'glyphicon glyphicon-trash'
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    $('<td/>', {
+                        'html': [
+                            $('<button/>', {
+                                'type': 'button',
+                                'class': 'btn btn-default btn-sm save-extra hidden',
+                                'title': EALang.save,
+                                'html': [
+                                    $('<span/>', {
+                                        'class': 'glyphicon glyphicon-ok'
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    $('<td/>', {
+                        'html': [
+                            $('<button/>', {
+                                'type': 'button',
+                                'class': 'btn btn-default btn-sm cancel-extra hidden',
+                                'title': EALang.cancel,
+                                'html': [
+                                    $('<span/>', {
+                                        'class': 'glyphicon glyphicon-ban-circle'
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+                .appendTo('.extra-periods tbody');
 
             // Bind editable and event handlers.
-            tr = $('.extra-periods tr')[1];
-            this.editableBreakTime($(tr).find('.extra-day'));
-            this.editableBreakTime($(tr).find('.extra-start, .extra-end'));
-            $(tr).find('.edit-extra').trigger('click');
+            this.editableBreakTime($newExtraPeriod.find('.extra-day'));
+            this.editableBreakTime($newExtraPeriod.find('.extra-start, .extra-end'));
+            $newExtraPeriod.find('.edit-extra').trigger('click');
             $('.add-extra-periods').prop('disabled', true);
         }.bind(this));