function assignPlaces() {
    const attendances = $('.attendance-id');
    attendances.each(function() {
        const seat_number = $(this).attr('id').split('++')[0];
        const name = $(this).attr('id').split('++')[1];
        const surname = $(this).attr('id').split('++')[2];
        const map_seat = $('#seat-map').find(`#${seat_number}`);
        map_seat.html(`<b>${seat_number}</b><br><span class="preview-name">${name} ${surname}</span>`)
        map_seat.on('mouseover', () => {
            map_seat.css('backgroundColor', 'lightgrey');
            $(this).css('backgroundColor', 'lightgrey');
        }).on('mouseleave', () => {
            map_seat.css('backgroundColor', '#a8b9bd');
            $(this).css('backgroundColor', 'unset');
        });
        $(this).on('mouseover', () => {
            map_seat.css('backgroundColor', 'lightgrey');
            $(this).css('backgroundColor', 'lightgrey');
        }).on('mouseleave', () => {
            map_seat.css('backgroundColor', '#a8b9bd');
            $(this).css('backgroundColor', 'unset');
        })
    })
}

$(document).ready(function(){
    assignPlaces();
});