Как заставить динамическую кнопку работать на javascript?

У меня есть 3 кнопки, которые работают как вкладки, я хочу сделать их динамическими.

Прямо сейчас у меня есть только статический текст внутри кнопки onclick. Как сделать его динамичным, не меняя текст в каждом классе вручную? потому что я добавлю больше кнопок, а не только три

-- HTML --

<ul class = "tab">
<li class = "tablinks" onclick = "openCity(event, 'City One')" id = "defaultOpen"><p>Food & Beverages</p></li>
<li class = "tablinks" onclick = "openCity(event, 'City Two')"><p>Sports & Outdoors</p></li>
<li class = "tablinks" onclick = "openCity(event, 'City Three')"><p>Furniture & Household</p></li>
</ul>

<div id = "City One" class = "tabcontent fade in active row">
         BODY CONTENT
</div>
<div id = "City Two" class = "tabcontent fade in active row">
         BODY CONTENT
</div>
<div id = "City Three" class = "tabcontent fade in active row">
         BODY CONTENT
</div>

-- SCRIPT --
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
                          document.getElementById(cityName).style.display = "inline-flex";
evt.currentTarget.className += " active";
}

jQuery("")