jQuery event handler not working on form elements that are dynamically inserted

Question

I three + and - buttons on Shopify that looks like (below). The problem is Shopify doesn't include 3 different forms, it dynamically updates the HTML attributes to show the other buttons. So when I click the second + button it increments by 2 instead of 1. Only the first one works.

The first + button works and increments or decrements by 1. But the second increments by 2. And the third doesn't work at all.

How to make click event apply to elements that are dynamically updated in the HTML?

jQuery

$('.plus').on('click', function(e) {
  var val = parseInt($(this).prev('input').val());
  $(this).prev('input').val(val + 1);
});
$('.minus').on('click', function(e) {
  var val = parseInt($(this).next('input').val());
  if (val !== 0) {
    $(this).next('input').val(val - 1);
  }
  if (val == 0) {
    $(this).next('input').val(1);
  }
});

HTML:

<div class="product-form__item product-form__item--quantity quantitiy_dv">
    <label class="quantitiy" for="Quantity-collection-template-new"></label>
    <input class="minus minus1" type="button" value="-">
    <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
    <input class="plus plus1" type="button" value="+">
</div>

Please let me know if you need more information!