javascript - jQuery remove element not working onClick

I have the following code that gets generated in PHP.

      <?php
    foreach ($quote->lineItems as $lineItem) {
      $name = "line_item_" . rand();
      $txtValue = "Supplier: " . $lineItem->supplierName . " Model: " . $lineItem->modelName . " Price: " . $lineItem->price . " Quantity: " . $lineItem->quantity;
      ?>
      <table >
        <tr>
          <td><input type='hidden' name='<?= $name ?> id='<?= $name ?>''
            value='<?= $lineItem->id ?>,<?= $lineItem->supplierId ?>,<?= $lineItem->supplierName ?>
            ,<?= $lineItem->modelId ?>,<?= $lineItem->modelName ?>,<?= $lineItem->price ?>
            ,<?= $lineItem->quantity ?>'/>
            <?= $txtValue ?>
          </td>
          <td>
            <button type='button' onclick="onBtnRemove('<?= $name ?>')" >
              Remove
            </button>
          </td>
        </tr>
      </table>
      <?php
    }
    ?>
Copy code

The onBtnRemove function looks like this.

        function onBtnRemove(idToRemove) {
            const toRemove = $("#" + idToRemove);
            toRemove.remove();
        }
Copy code

I cannot figure out why the element does not remove.