How can I use jQuery loop variable to start at 2 while maintaining field removal option?

Question

I found this snippet to add additional fields to a form. Works great. If you may, please let me know how I can have the added fields start at 2 while also maintaining the option to remove it. While i = 2 does work, I have not figured out what's needed for the option to add/remove said fields accordingly. Thank you for your time.

$(document).ready(function() {
  var i = 1;
  $('#add').click(function() {
    if (i <= 7) {
      $('#dynamic_field').append('<div class="add-row" id="row' + i + '"><label" for="number_' + i + '">Number ' + i + '</label><input type="text" name="number_' + i + '" value=""></div>')
      i++;
      $('.btn-remove').removeClass('hidden');
    }
  });
  $(document).on('click', '.btn-remove', function() {
    var button_id = $(this).attr("id");
    i--;
    $('#row' + $('#dynamic_field div').length).remove();
    if (i<=1) {
      $('.btn-remove').addClass('hidden');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button>   <button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>

Answer 1

Your code is being made unnecessarily complicated by the use of id attributes which you generate at runtime.

You can completely avoid the need to do this by using the same content in each row, which you can store in a template element. Note that this template content uses no id, but the same class instead, and also that the label wraps the input so no for attribute is required.

You can then simply get the number of existing rows in the DOM to calculate the next number to display. Also, as the 'remove' button only targets the last row you can select it directly with .row:last.

Here's a working example with all these changes implemented:

jQuery($ => {
  let maxRows = 7;
  let rowTemplate = $('#row-template').html();
  let $container = $('#dynamic_field');

  $('#add').on('click', () => {
    let rowCount = $('.row').length;
    if (rowCount >= maxRows)
      return;
      
    let $row = $(rowTemplate).appendTo($container);
    $row.find('span').text(rowCount += 2);
    $('.btn-remove').removeClass('hidden');
  });
  
  $(document).on('click', '.btn-remove', () => $('.row:last').remove());
});

.hidden { 
  display: none;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button> 
<button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>

<template id="row-template">
  <div class="row">
    <label>
      Number <span></span>
      <input type="text" name="number[]" value="" />
    </label>
  </div>
</template>