The Unordered List Data getting destroyed when another dom element is getting clicked? The page is built in aspx

Question

I am trying to display the the data in an Unordered list which is coming from an API. Below is the code how I have implemented it. Its working completely fine and the data gets displayed as well. But as soon as someone clicks on any other buttons the data disappears as if the list is getting destroyed.

<div class="vendorMarketScroll">
     <ul id="vendorMarketList">
     </ul>
</div>

Populating the List (vendorMarket is containing the data from the API):

function makeVendorMarketList(vendorMarket) {
            if (vendorMarket && vendorMarket.length > 0)
            {
                vendorMarket.sort(function (a, b) {
                return (a.marketName < b.marketName) ? -1 : (a.marketName > b.marketName) ? 1 : 0;
                }); 
                for (var market in vendorMarket) {
                    if(vendorMarket[market].marketName){
                        var z = document.createElement('li');
                        z.innerHTML = vendorMarket[market].marketName;
                        document.getElementById("vendorMarketList").appendChild(z);
                    }
                }
            }  
        }

Please help me in understanding the reason behind this, and what is the correct way to implement this?

Answer 1

The Problem was something different: the page was getting loaded for many places and hence the creation function had to be called from all the places.

It was kinda my mistake, I was new to the solution.

Thanks to all those who invested their time and tried helping me:)