Erratic behaviour pasing variables from PHP to a modal Bootstrap4

I have this HTML that should open a modal with information changing dynamically.

I am trying to 5 variables:

• data-employee,
• data-time
• data-start
• data-shift
• data-image

All five variables are string type.

My HTML call the modal like this:

@foreach($appointments as $appointment)

	<a  class="text-success"
		data-toggle="modal"
		data-target="#modal_createAppointment"
		data-employee="{{ $employee }}"
		data-time="{{ Carbon\Carbon::parse($appointment['startDate'])->isoFormat('dddd, DD MMMM') }}"
		data-start="{{ $starting_at }}"
		data-shift="{{ $workshift }}"
    data-image = "{{ $image }}"
		aria-pressed="true">
		{{ $appointment['starting_at'] }} <i class="fas fa-chevron-right ml-2"></i>
	</a>

@endforeach

And the modal opens:

<div id="modal_createAppointment" tabindex="-1" role="dialog" aria-labelledby="modal_createAppointment">

<div id="modal-appointments" class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">
                <span id="modal-employee"></span>
                <span id="modal-start"></span>
                <span id="modal-shift"></span>            
                <span id="modal-time"></span>
            </h4>
        </div>

        <div class="modal-body">
            <div class="modal-info">
                <form method="POST" action="{{route('frontend.company.appointment.store', $company )}}" accept-charset="UTF-8">
                    <input name="startTime" type="hidden" id="attribute_0">
                    <input name="employee_name" type="hidden" id="attribute_1">
                    <input name="image" type="hidden" id="attribute_2">
                    {{ csrf_field() }}

                         // ... More code hier
                 </form>
            </div>
        </div>
    </div>
</div>

<script>
    // data-* attributes to scan when populating modal values
var ATTRIBUTES = ['time', 'employee', 'image', 'start', 'shift'];

$('[data-toggle="modal"]').on('click', function (e) {
    // convert target (e.g. the button) to jquery object
    var $target = $(e.target);
    // modal targeted by the button
    var modalSelector = $target.data('target');

    let count = 0;
    
    // iterate over each possible data-* attribute
    ATTRIBUTES.forEach(function (attributeName) {
    // retrieve the dom element corresponding to current attribute
    var $modalAttribute = $(modalSelector + '#modal-' + attributeName);
    var dataValue = $target.data(attributeName);

    // if the attribute value is empty, $target.data() will return undefined.
    // In JS boolean expressions return operands and are not coerced into
    // booleans. That way is dataValue is undefined, the left part of the following
    // Boolean expression evaluate to false and the empty string will be returned
    $modalAttribute.text(dataValue || '');
    document.getElementById('attribute_' + count).value = $target.data(attributeName);
    count++
    });

});

</script>

</div>

All four variables are present (I see all correct in the Chrome Developer tools), but just passed the data-time and data-employee. The other three are not shown.

I have changed the order with the same result.

I have not idea why is passing just 2 variables instead of five?

Obviously I am missing somthing simple, but not idea what

• In the other hand, I would prefer to pass the object or perhaps as Array. Something like this: HTML

data-appointment = ['time' => $time, 'employee' => $employee, 'image' => $img, 'start' => '08:00', 'shift' => 'late  shift']

Unfortunatelly my knowledge about javaScript is very limited