JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="product-list">
      <li>
        <span class="product-name">Foo</span>
        <a href="#remove-foo" class="removeWithOne">Remove Product</a>
      </li>
      <li>
        <span class="product-name">Bar</span>
        <a href="#remove-bar" class="removeWithOne">Remove Product</a>
      </li>
      <li>
        <span class="product-name">Baz</span>
        <a href="#remove-baz" class="removeWithOn">Remove Product</a>
      </li>
      <li>
        <span class="product-name">Bat</span>
        <a href="#remove-bat" class="removeWithOn">Remove Product</a>
      </li>
    </ul>

JavaScript

// this version removes the handler as soon as any instance is clicked!
    $('#product-list').one('click.productRemoveOne', 'a.removeWithOne', function (e) {
      var $this = $(this),
          $name = $this.siblings('span.product-name');
    
      e.preventDefault();
    
      $name.text($name.text() + ' (removed)');
    });

    // this one executes the handler multiple times!
    $('#product-list').on('click.productRemoveOn', 'a.removeWithOn:not(.ignore)', function (e) {
      var $this = $(this).addClass("ignore"),
          $name = $this.siblings('span.product-name');
    
      e.preventDefault();
    
      $name.text($name.text() + ' (removed)');
    });