Show previous content when document.querySelectorAll()

[wsdev101]

Bug description

The Tooltip shows the previous content on mouse Click. It is happening when using document.querySelectorAll for a JS datatable. I want to show a TR data on content when TR is clicked. I need to click twice to get the selected row data.

Rows are add dynamically at runtime.

Reproduction

$(document).on('click', '.prize-info', function() {
    const row = $(this);
    const $tr = row.closest('tr');
    const prize = $tr.data('prize');

   tippy(document.querySelectorAll('.prize-info'), {
        trigger: 'click',
        touch: true,
        content: `Value :  ${prize}`, 
        placement: 'left', 
    });
  });

<table  >
    <thead>
        <tr >
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody id="plays">
        <tr id="abc" data-prize="1">
            <td   class="prize-info">A</td>
<td   class="prize-info">A</td>
<td   class="prize-info">A</td>
        </tr>
        <tr id="ab1" data-prize="3">
            <td  class="prize-info">B</td>
<td  class="prize-info">B</td>
<td  class="prize-info">B</td>
        </tr>
        <tr id="ab2" data-prize="2">
            <td class="prize-info">C</td>
<td class="prize-info">C</td>
<td class="prize-info">C</td>
        </tr>
    </tbody>
</table>