如何使动态按钮在javascript上起作用？

Question

我有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("")