JSFiddle - React, Tailwind, and code Playground

by pierian_design

HTML

<div id="customSelectLookupSpreadSheet" class="cts-spreadsheet-select">
                    <div class="cts-spreadsheet-select-input">
                        <div id="selectLookupSpreadSheet" class="adx-input" tabindex="0"></div>
                    </div><!--
                    -->
                    <div class="cts-spreadsheet-select-menu adx-hide">
                        <div class="cts-spreadsheet-select-list">
                            <span data-value="current">Current Spreadsheet</span>
                        </div>
                        <span class="main-spreadsheet" data-value="new">Select spreadsheet from Drive</span>
                    </div>
                </div>

JavaScript

var CTSLookupTableStep = (function(CTSLookupTableStep) { //tut
        
        CTSLookupTableStep.SpreadSheets = {
            bIsInitialized: false,
            sActive: '',
            sMainId: '',
            sMainName: '',
            aNames: [],
            aIds: [],
            selectBox: null
        };

        let _ui = {
            selectLookupSheet: null,
            selectLookupSpreadSheet: null,
        };     

        CTSLookupTableStep.SpreadSheets.selectBox = {
            _divElem: document.querySelector('#customSelectLookupSpreadSheet'),
            _divInput: document.querySelector('#customSelectLookupSpreadSheet .cts-spreadsheet-select-input'),
            _input: document.querySelector('#customSelectLookupSpreadSheet .cts-spreadsheet-select-input .adx-input'),
            _menu: document.querySelector('#customSelectLookupSpreadSheet .cts-spreadsheet-select-menu'),
            _list: document.querySelector('#customSelectLookupSpreadSheet .cts-spreadsheet-select-list'),
            _main: document.querySelector('#customSelectLookupSpreadSheet .main-spreadsheet'),
        };
        
         CTSLookupTableStep.SpreadSheets.selectBox.setItems = function(aNames, aValues) {

        };
        
        CTSLookupTableStep.SpreadSheets.init = function() {
          console.log("===============================================================================");
          console.log(CTSLookupTableStep.SpreadSheets.selectBox);
        };        

        return CTSLookupTableStep;
    })(CTSLookupTableStep || {});        
    
    CTSLookupTableStep.SpreadSheets.init();