estee lauder 3 dropdowns

(function() {
        const currentLB = document.querySelector('.' + self.identifier + '.__ADORIC__ [tabindex]');
        const step1Field = currentLB.querySelector('.step1');
        const step3Field = currentLB.querySelector('.step3');
        const step2Field = currentLB.querySelector('.step2');
        step2Field.style.setProperty('pointer-events', 'none');
        step3Field.style.setProperty('pointer-events', 'none');
        let data = {};
        let step1arr = [];
        let AllProducts = [];
        const DATA_URL = 'https://static.adoric.com/dropdownEsteeLauder.json';

        function filterArray(arr, key) {
            const newArr = [];
            arr.map(i => {
                if (!newArr.includes(i[key])) {
                    newArr.push(i[key]);
                }
            });
            return newArr;
        };
        fetch(DATA_URL).then(result => result.json()).then(res => {
            AllProducts = res;
            step1arr = filterArray(AllProducts, 'Brand');
            fillCustomDropDown(step1Field, step1arr);
            const dropdownStep1 = step1Field.querySelector('.element-input-select-design-container-dropdown');
            dropdownStep1.addEventListener('click', (event) => {
                step2Field.style.setProperty('pointer-events', 'auto');
                const placeholderStep2 = step2Field.querySelector('.element-input-select-design-container-placeholder');
                const placeholderStep3 = step3Field.querySelector('.element-input-select-design-container-placeholder');
                if (placeholderStep2.textContent !== 'שם מותג') {
                    placeholderStep2.textContent = 'שם מותג';
                }
                if (placeholderStep3.textContent !== 'גוון') {
                    placeholderStep3.textContent = 'גוון';
                    step3Field.style.setProperty('pointer-events', 'none');
                }
                const filteredData = AllProducts.filter(j => j.Brand == event.target.textContent);
                const step2arr = filterArray(filteredData, 'Product');
                fillCustomDropDown(step2Field, step2arr);
                const dropdownStep2 = step2Field.querySelector('.element-input-select-design-container-dropdown');
                dropdownStep2.addEventListener('click', (event2) => {
                    const placeholderLastStep = step3Field.querySelector('.element-input-select-design-container-placeholder');
                    step3Field.style.setProperty('pointer-events', 'auto');
                    if (placeholderLastStep.textContent !== 'גוון') {
                        placeholderLastStep.textContent = 'גוון';
                    }
                    const filteredDataLastStep = AllProducts.filter(n => n.Product == event2.target.textContent);
                    const step3arr = filteredDataLastStep.map(item => item.Shade);

                    fillCustomDropDown(step3Field, step3arr);
                    const dropdownStep3 = step3Field.querySelector('.element-input-select-design-container-dropdown');
                    dropdownStep3.addEventListener('click', (event3) => {
                        filteredDataLastStep.map(item => {
                            if (item.Shade == event3.target.textContent) {
                                data = JSON.stringify(item);
                                sessionStorage.setItem('adoricDropdownData', data);
                            }
                        })
                    });
                });
            });
        }).catch(error => console.log(error));

        function fillCustomDropDown(fieldSet, dataArray) {
            /*clone template span*/
            var templateSpan = fieldSet.querySelector('.element-input-select-design-container-dropdown SPAN');
            var dropdownSpans = templateSpan.parentNode; /*clone template option*/
            var options = fieldSet.querySelectorAll('SELECT>OPTION');
            var templateOption = options[1];
            var dropdownOptions = templateOption.parentNode; /*clean dropdown*/
            while (dropdownSpans.firstChild) {
                dropdownSpans.removeChild(dropdownSpans.lastChild);
            }
            while (dropdownOptions.firstChild.nextSibling) {
                /*leave first option as dummy*/
                dropdownOptions.removeChild(dropdownOptions.lastChild);
            } /* fill spans*/
            for (var i = 0; i < dataArray.length; i++) {
                var templateDiv = templateSpan.cloneNode();
                templateDiv.dataset.optionValue = dataArray[i];
                templateDiv.textContent = dataArray[i]; /*templateDiv.setAttribute(dataArray[i].dataNextStepOption, dataArray[i].dataNextStepOptionName);*/
                dropdownSpans.append(templateDiv);
            } /* fill Options*/
            for (var i = 0; i < dataArray.length; i++) {
                var templateDiv = templateOption.cloneNode();
                templateDiv.value = dataArray[i];
                templateDiv.textContent = dataArray[i];
                dropdownOptions.append(templateDiv);
            }
        }
    })();