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?