How to assign different object values to different buttons while using the same function?

Good morning!

I am obviously pretty new to the whole programming thing, so I am working on a basic PoS application for a restaurant. I am trying to figure out how I can assign different values to the different buttons while using the same button click function. I know I could write out a new function for each button, but there has to be a better way. I currently just have it set for the top right port nachos button to push the information into the tab section (though right now I am drawing a blank as to why it is the only one to do this instead of all the foodbuttons pushing the pork nachos info). Any help would be greatly appreciated. Thanks again!

        <h1>Point of Sale</h1>
    <section id="foodOptionsSection">
        <h3>Food Options</h3>
        <button type="button" class= "foodButtons buttons" id="porkNachosFood">Pulled Pork Nachoes</button>
        <button type="button" class= "foodButtons buttons" id="wingsFood">6 Wings</button>
        <button type="button" class= "foodButtons buttons" id="totsFood">Tater Tots</button>
        <button type="button" class= "foodButtons buttons" id="hamburgerFood">Hamburger</button>
        <button type="button" class= "foodButtons buttons" id="cbqbbqFood">CBWBBQ</button>
        <button type="button" class= "foodButtons buttons" id="ppgcFood">PPGC</button>
        <button type="button" class= "foodButtons buttons" id="tacosFood">Tacos</button>
        <button type="button" class= "foodButtons buttons" id="friesFood">Fries</button>
        <button type="button" class= "foodButtons buttons" id="porkRindsFood">Pork Rinds</button>

    <section id="tabList">
        <h3>Current Tab</h3>
        <div class="tabNameList tab">

        <div class="tabAmountList tab">


    <script src="script.js"></script>

const food = [
        name: "Pulled Pork Nachos",
        price: 10.00
        name: "6 Wings",
        price: 5.00
        name: "Pork Rinds",
        price: 4.00
const drinks = [
        name: "Well Vodka",
        price: 5.00
        name: "Well Whiskey",
        price: 5.00
const merch = [
        name: "Well Vodka",
        price: 5.00
        name: "T Shirt",
        price: 20.00

const tabNameSection = document.querySelector('.tabNameList');
const tabAmountSection = document.querySelector('.tabAmountList');
const btns = document.querySelector('.foodButtons');

// const wings = document.querySelector('#wingsFood');
// wings.assign('wings', 6.00)
// console.log(wings);

function addTab(event) {
    //Name Div
    const tabNames = document.createElement('div');

    //Amt Div
    const tabAmt = document.createElement('div');

    //Create LI Tab Names
    const tabNameList = document.createElement('li');
    tabNameList.innerText = food[0].name;    

    //Create LI Tab Amounts
    const tabAmountList = document.createElement('li');
    tabAmountList.innerText = food[0].price;

     //Check trash button
    const trashButton = document.createElement("button")
    trashButton.innerHTML = '<i class="fas fa-trash"></i>';

    //append to LIs

btns.addEventListener('click', addTab);

this select only one element

to select all of them you would need to use querySelectorAll, which returns an html collection (array-like) and iterate over it with a loop to assign to all the elements

maybe with the this keyword, look here (if it doesn’t bring there, the section is “As a DOM event handler”)