How to switched between clicked buttons

I have a goup of buttons. I want to detect which button was clicked and send different argument to another function

    <div class="d-flex">
      <button id="a2" class="btn btn-primary m-2 ">A2</button>
      <button id="a4" class="btn btn-primary m-2">A4</button>
      <button id="others" class="btn btn-primary m-2">Andere</button>
    </div>

this code is working but when I clicked on one button and then on the other one data from first button are still displaying

   roadA2.addEventListener("click", () => {
       show(filterA2(filterData(data)));
   });

   roadA4.addEventListener("click", () => {
       show(filterA4(filterData(data)));
   });
   otherRoads.addEventListener("click", () => {
       show(filterOthers(filterData(data)));
   }); 

I would need to do something like this

     if(roadA2.clicked == true){
        show(filterA2(filterData(data)));
      }else if(roadA4.clicked == true){
        show(filterA4(filterData(data)));
      }else if(roadA4.clicked == true){
        show(filterOthers(filterData(data)));
      }else{
         show(filterData(data));   
      } 

unfotunately this code doesn't work even if I remove code inside and replace it with console.log()

this is function where I want to send it

function show(mainFilter) {
    console.log("mainFilter", mainFilter)


    ////////////// main filter //////////////////////////////////////////
    let resultsLength = mainFilter.length;
    results.innerHTML = resultsLength;

    let tableHeading = `<tr>
                            <th>Code</th>
                            <th>Road</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th>Text</th>
                        </tr>`;
    
    trafficTable.insertAdjacentHTML("beforeend", tableHeading)                   
    // Loop to access all rows 
    for (let r of mainFilter) {
       let newTableRow = `<tr> 
                            <td>${r.code} </td>
                            <td>${r.r}</td>
                            <td>${r.lat}</td>
                            <td>${r.lon}</td>
                            <td>${r.txt}</td>          
                        </tr>`;
          console.log(typeof r.lat);             
        trafficTable.insertAdjacentHTML("beforeend", newTableRow)
    }
    // Setting innerHTML as tab variable
    document.getElementById("traffic-table").innerHTML = tableHeading + newTableRow;
}