JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h2>Sport</h2>
</header>
<table>
  <tr id="111">
   <td>Real Madrid - Barcelona</td>
   <td>
    <button id="1">1,20</button>
   </td>
   <td>
     <button id="2">2,00</button>
   </td>
   <td>
    <button id="3">2,40</button>
   </td>
</tr>
 <tr id="222">
      <td>Milan - Inter</td>
      <td>
        <button id="4">1,60</button>
      </td>
      <td>
        <button id="5">2,10</button>
      </td>
      <td>
        <button id="6">1,90</button>
      </td>
    </tr>
    <tr id="333">
      <td>Chelsea - Man. United</td>
      <td>
        <button id="7">2,66</button>
      </td>
      <td>
        <button id="8">3,11</button>
      </td>
      <td>
        <button id="9">1,11</button>
      </td>
    </tr>
   <tr id="444">
      <td>PSG - Lyon</td>
      <td>
        <button id="10">1,85</button>
      </td>
      <td>
        <button id="11">2,48</button>
      </td>
      <td>
        <button id="12">2,05</button>
      </td>
    </tr>
  </table>

<h3>Ticket</h3>

<div id="ticket">

</div>

JavaScript

<!-- np=array with names of clubs, odd=array with odds -->
  var match, buttonId, cnp;
  var np = [];
  var odd = [];

Element = document.getElementByTagName('button');

Element.onClick(myFunction(Element.id,Element.parentNode('tr').id));

function myFunction(a, b) {
    match = document.getElementById(b).innerHTML;
    buttonId = document.getElementById(a).innerHTML;
    cnp = np.indexOf(buttonId);
    if (cnp == -1) {
      np.push(buttonId);
      odd.push(match);
    } else {
      odd[cnp] = match;
    }
    
    var i;
    var ticketInfo ='';
    
    for (i = 0; i < np.length; i++) {
    // if there is more than one separate them with a comma
      if (i > 0) {
        ticketInfo += ', ';
      }
      ticketInfo += np[i];
    }
    document.getElementById("ticket").innerHTML = ticketInfo;

    console.log(np);
    console.log(odd);
  }