Портфолио для Windows

В настоящее время я создаю портфолио, в котором я намерен имитировать рабочий процесс Windows, чтобы отображать мои проекты и иметь знакомое взаимодействие с пользователем. Проблема, с которой я сейчас сталкиваюсь, заключается в создании нескольких окон для браузера. Я могу создать несколько из них в то время, но когда я пытаюсь указать содержимое, указанное для каждого окна, они не предполагают, что правильный контент назначен. Я использую обычные JS и jQuery в этом проекте.

Я создаю окна проводника со следующим кодом:

$(window).ready(function(){

var desktop = document.querySelector('.workarea');

$('.general_icon').click(function(e){
    console.log(e);

    var explorerWindow = document.createElement('div');
    explorerWindow.className += 'explorer_window ui-widget-content ';

        var topToolBar = document.createElement('div');
        topToolBar.className += 'top_toolbar';

            var windowTitle = document.createElement('div');
            windowTitle.className += 'window_title';
            windowTitle.innerHTML = e.currentTarget.innerText;

            var windowOperations = document.createElement('div')
            windowOperations.className += 'window_operations';

                var minimize = document.createElement('div')
                minimize.className += 'minimize';
                minimize.innerHTML += '_';

                var maximize = document.createElement('div')
                maximize.className += 'maximize';
                maximize.innerHTML += '□';

                var close = document.createElement('div')
                close.className += 'close';
                close.innerHTML += '×';

            var topToolBar2 = document.createElement('div');
            topToolBar2.className += 'top_toolbar_2';

                var secondToolbBarOpt1 = document.createElement('span')
                secondToolbBarOpt1.className += 'noselect';
                secondToolbBarOpt1.innerHTML = 'File';

                var secondToolbBarOpt2 = document.createElement('span')
                secondToolbBarOpt2.className += 'noselect';
                secondToolbBarOpt2.innerHTML = 'Base';

                var secondToolbBarOpt3 = document.createElement('span')
                secondToolbBarOpt3.className += 'noselect';
                secondToolbBarOpt3.innerHTML = 'Share';

                var secondToolbBarOpt4 = document.createElement('span')
                secondToolbBarOpt4.className += 'noselect';
                secondToolbBarOpt4.innerHTML = 'View';

            var contentHolder = document.createElement('div');
            contentHolder.className += 'content_holder';

                //determines current clicked icon
                //var ter = e.currentTarget.attributes[1].value;

        desktop.appendChild(explorerWindow);
            explorerWindow.appendChild(topToolBar);
                topToolBar.appendChild(windowTitle);
                topToolBar.appendChild(windowOperations);
                    windowOperations.appendChild(minimize);
                    windowOperations.appendChild(maximize);
                    windowOperations.appendChild(close);
            explorerWindow.appendChild(topToolBar2);   
                topToolBar2.appendChild(secondToolbBarOpt1);
                topToolBar2.appendChild(secondToolbBarOpt2);
                topToolBar2.appendChild(secondToolbBarOpt3);
                topToolBar2.appendChild(secondToolbBarOpt4);
            explorerWindow.appendChild(contentHolder);

        var ter = e.currentTarget.attributes[1].value;
        console.log(ter)
        console.log(projectsData[ter].paths.length)

        for (var i = 0; i < projectsData[ter].paths.length; i++) {
            var actCont = document.createElement('div');
            actCont.className += 'act_cont';
            contentHolder.appendChild(actCont); 
        }

        var innerActCont = document.getElementsByClassName('act_cont');
        for (var k = 0; k < projectsData[ter].paths.length; k++) {
            innerActCont[k].style.backgroundImage = 'url(' + projectsData[ter].paths[k] + ')';
            event.stopPropagation();
        }

    //make windows draggable
    //sets the target for the drag event
    $(".explorer_window").draggable({ handle: ".top_toolbar", containment: '.place' } );

});

});

В цикле projectsData я используется:

var projectsData = [
    {
        title:'Random Lines of Color',
        icon: 'images/random_bars_colors.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title:'Numbers to Letters Converter',
        icon: 'images/nums_to_letters.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title: 'Tipos',
        icon: 'images/port/tipos/tipo.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title: 'Cópia Maplethorpe',
        icon: 'images/port/thorpe/thorpe.png',
        paths : [
            'images/port/thorpe/1.jpg',
            'images/port/thorpe/2.png',
        ]
    },
    {
        title: 'Packaging Cubo',
        icon: 'images/port/moo/moo.png',
        paths : [
            'images/port/moo/1.png',
            'images/port/moo/2.png',
            'images/port/moo/3.png'
        ]
    },
    {
        title: 'Gama Especial',
        icon: 'images/port/magn/magnum.png',
        paths : [
            'images/port/magn/1.png',
            'images/port/magn/2.png',
            'images/port/magn/3.png',
            'images/port/magn/4.png',
            'images/port/magn/5.png',
            'images/port/magn/6.png'
        ]
    },
    {
        title: 'Hearts And Bones',
        icon: 'images/port/hb/hb.png',
        paths : [
            'images/port/hb/1.png',
            'images/port/hb/2.png',
            'images/port/hb/3.png',
            'images/port/hb/4.png',
            'images/port/hb/5.png'
        ]
    },
    {
        title: 'Alzheimer',
        icon: 'images/port/alz/alz.png',
        paths : [
            'images/port/alz/1.jpg'
        ]
    }
]

Текущая версия веб-сайта находится в режиме http://mingus.pt

Окна проводника открываются при однократном нажатии значка на рабочем столе. Существует также проблема, когда я прокручиваю в окнах проводника, я не могу заставить панель инструментов оставаться с фиксированной позицией, это второстепенная вещь, но если у вас есть свободное время, чтобы посмотреть на это, я бы очень сильно посягал.

Заранее благодарим за помощь, которую вы можете дать ребятам!