Here is a working codepen: https://codepen.io/adebolle/pen/eYdbbad

HTML:

This is my list:
<ul id = "subCategoryUL" onclick="selectSubCategory()">

</ul>

CSS:

#subCategoryUL {
    min-width: 50px;
    min-height: 50px;
    background-color: red;
}

JS

var names = ["Value1", "Value2", "Value3"];

function selectSubCategory(){
        var selectedSubCategory = document.getElementById('subCategoryUL');
        let index = selectedSubCategory.getElementsByTagName('li').length % names.length;
        var li = document.createElement('li');
        li.innerHTML = names[index];
        li.style.font.fontsize(150);
        document.getElementById('subCategoryUL').appendChild(li);
        console.log("subCategoryULR "+selectedSubCategory.innerText);//+subCategory);
}

I added CSS styling, because without it your empty list will have near to 0 height, adding the color makes sure we know where to click. For the javascript function I added a modulus operation to “loop” over the names.

It is required that when you click a list item, the function works and displays its value. The list is initially empty, items are added dynamically. Do not use jQuery. Help please.

<ul id = "subCategoryUL" onclick="selectSubCategory()">

 </ul>

switch (a) {
        case 1:{
            var names = ["Value1", "Value2", "Value3"];
            for (var i = 0; i < names.length; i++) {
                var name = names[i];
                var li = document.createElement('li');
                li.innerHTML = name;
                li.style.font.fontsize(150);
                document.getElementById('subCategoryUL').appendChild(li);
            }
        }
    }

function selectSubCategory(){
        var selectedSubCategory = document.getElementById('subCategoryUL');
        console.log("subCategoryULR "+selectedSubCategory.innerText);//+subCategory);
        
}