Commands . on and . live do not work for new elements

Question

I have a form where I can generate new elements like.

Let’s say I have the following.

var i = 0;
$('ul[class^="inpt_"] li button[name="mais"]').on('click', function() {
  /* Encontra o maior valor */
  var aux = 0;
  $('#gado ul[class^="inpt_"]').each(function() {
    var alvo = $(this).attr('class');
    alvo = alvo.replace('inpt_', '');
    alvo = parseInt(alvo, 10);
    if (alvo > i) {
      i = alvo;
    }
  });

  // Incrementa-o em 1
  i++;

  // Aplica no novo conjunto que será inserido no início da DIV ID gado
  $('#gado').prepend(
    "<div>" +
    "<ul class='inpt_" + i + "'>" +
    "<li><input name='boi[]' type='text' maxlength='50' placeholder='Num. do animal'></li>" +
    "<li><select name='fk_boi[]' ><option>Aguardando...</option></select></li>" +
    "<li><input type='number' name='peso[]' placeholder='Peso'></li>" +
    "<li><input type='date' name='d_peso[]'></li>" +
    "<li><button type='button' name='mais'>+1</button></li>" +
    "<li><button type='button' name='inpt_" + i + "'>excluir este</button></li>" +
    "</ul>" +
    "<div class='cboth'></div>" +
    "</div>"
  );
});


$('ul button[name^="inpt_"]').on('click', function() {
  /* Encontra a div container correta para remover do form */
  // Conta o número de elementos ul com class começando por inpt_
  var i = 0;
  $('#gado ul[class^="inpt_"]').each(function() {
    i++;
  });

  // Remove apenas se o número de elementos contados for maior que 1, prevenindo erros do usuário
  if (i > 1) {
    $(this).closest('div').remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="vendaBois">
  <h3>Venda de Gado</h3>

  <div>
    <label>Cliente</label>
    <select name="fk_cli">
      <option value="6">ANNE FRANK</option>
      <option value="1">ANTÔNIO CONSELHEIRO</option>
      <option value="5">FRANCISCO ANÍSIO DE PAULA</option>
      <option value="3">JOSÉ CARRERAS (00018732198)</option>
      <option value="2">JOSÉ FRANCO DOS REIS</option>
      <option value="7">PEDRO SEGUNDO DE ALCÂNTARA</option>
      <option value="4">PLACIDO DOMINGO</option>
    </select>
  </div>

  <div id="gado">
    <div id="container-input1">
      <ul class="inpt_1">
        <li><input name="boi[]" type="text" maxlength="50" placeholder="Num. do animal"></li>
        <li>
          <select name="fk_boi[]">
            <option>Aguardando...</option>
          </select>
        </li>
        <li><input type="number" name="peso[]" placeholder="Peso"></li>
        <li><input type="date" name="d_peso[]"></li>
        <li><button type="button" name="mais" class="mrgr02">+1</button></li>
        <li><button type="button" name="inpt_1">excluir este</button></li>
      </ul>
      <div class="cboth"></div>
    </div>
    <div id="container-input2">
      <ul class="inpt_2">
        <li><input name="boi[]" type="text" maxlength="50" placeholder="Num. do animal"></li>
        <li>
          <select name="fk_boi[]">
            <option>Aguardando...</option>
          </select>
        </li>
        <li><input type="number" name="peso[]" placeholder="Peso"></li>
        <li><input type="date" name="d_peso[]"></li>
        <li><button type="button" name="mais" class="mrgr02">+1</button></li>
        <li><button type="button" name="inpt_2">excluir este</button></li>
      </ul>
      <div class="cboth"></div>
    </div>
    <div id="container-input3">
      <ul class="inpt_3">
        <li><input name="boi[]" type="text" maxlength="50" placeholder="Num. do animal"></li>
        <li>
          <select name="fk_boi[]">
            <option>Aguardando...</option>
          </select>
        </li>
        <li><input type="number" name="peso[]" placeholder="Peso"></li>
        <li><input type="date" name="d_peso[]"></li>
        <li><button type="button" name="mais" class="mrgr02">+1</button></li>
        <li><button type="button" name="inpt_3">excluir este</button></li>
      </ul>
      <div class="cboth"></div>
    </div>
  </div>

  <div>
    <input type="text" name="valor" placeholder="7.358,00">
  </div>

</form>

It turns out that the new elements created are not affected. I’ve already used the option . bind and . on, but it’s no use.

What is the correct function to use in these cases?

Thanks in advance.