proplem in jquery when creating inputs cannot create a limit for the created elements

Question

I am trying to create inputs with jquery when user click on specific button as i create the inputs i want them to stop creating if the number of inputs exceeds 10 and here is the code

   <script>
            $(document).ready(function(){
              var inputs = $('.product-options').length;
              var max_inputs = 15;
              var i=inputs;
              var number = inputs;
              if(inputs < 2){
              $('.add_field_button').click(function(e){
                  e.preventDefault();
                  number++
                  i++;
                  $('.form-product').append('<span  id="row'+i+'" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7">  <input type="text" class="form-control product-options" name="childen'+number+'"'+'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice'+number+'"'+ 'value="" placeholder="option price"></div>  </div> <div class="form-group"> <div class="col-sm-7">  <input type="text" class="form-control product-options" name="childsrb'+number+'"'+'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
              });
            }
              
              $(document).on('click', '.btn_remove', function(){
                  var button_id = $(this).attr("id"); 
                  $('#row'+button_id+'').remove();
                  number--
                  i--;
                });            
              });
            </script>

html code

 <div class="form-group product-option">
                    <label class="col-sm-2 control-label"></label>

                      <div class="col-sm-10 product-option">
                        <button type="button" class="add_field_button on-hover" style="background: none; border:none;">
                        <i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
                      <label for="option">Product options</label><br>
                      <div class="form-group product-option form-product">
                   
                      </div>
                    </div>
                  </div>

Answer 1

You can use an if statement to check whether i is smaller than 11:

$(document).ready(function() {
  var inputs = $('.product-options').length;
  var max_inputs = 15;
  var i = inputs;
  var number = inputs;
  if (inputs < 2) {
    $('.add_field_button').click(function(e) {
      e.preventDefault();
      number++
      i++;
      if (i < 11) {
        $('.form-product').append('<span  id="row' + i + '" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7">  <input type="text" class="form-control product-options" name="childen' + number + '"' + 'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice' + number + '"' + 'value="" placeholder="option price"></div>  </div> <div class="form-group"> <div class="col-sm-7">  <input type="text" class="form-control product-options" name="childsrb' + number + '"' + 'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
      }
    });
  }

  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
    number--
    i--;
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group product-option">
  <label class="col-sm-2 control-label"></label>

  <div class="col-sm-10 product-option">
    <button type="button" class="add_field_button on-hover" style="background: none; border:none;">
                        <i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
    <label for="option">Product options</label><br>
    <div class="form-group product-option form-product">

    </div>
  </div>
</div>