увеличения серийного номер, когда нажмите переключатель

Question

Я не я застрял с увеличением серийного номера автоматически, когда я нажимаю кнопку Добавить, это добавить новое поле, но серийный номер должен увеличиваться можете вы, ребята, помогите мне ..

<div class="input-group"> 
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/> 
</div> 
<span class='toggler date'> 
    <a class="btn btn-condensed btn-sm"> 
     <div style="font-size:16px"> 
      <i class="fa fa-plus-square"></i> 
     </div> 
    </a> 
</span> 
<span class='toggler date' style='display:none;'> 
    <a class="btn btn-condensed btn-sm"> 
     <div style="font-size:16px"> 
      <i class="fa fa-plus-square"></i> 
     </div> 
    </a> 
</span> 

И когда я нажимаю кнопку добавить этот HTML добавит

<div class='toggled_content1' style="padding-bottom:15px"></div> 
<div class='toggled_content' style='display:none;'> 
    <div class="form-group"> 
     <div class="col-md-2 col-xs-12"> 
      <div class="input-group"> 
       <input type="text" name="sno[]" class="form-control" placeholder="S. No."/> 
      </div> 
     </div> 
    </div> 
</div> 

и переключать JavaScript,

jQuery(document).ready(function($){ 
    $('.toggler').on('click',function(){ 
     var fff=$(".toggled_content").html(); 
     $(".toggled_content1").append(fff); 
    }); 
}); 

Можете ли вы, ребята, помогите мне, когда я нажимаю кнопку добавления, как увеличить S. Нет. Автоматически.

Answer 1

Попробуйте это;

$(function() { 

    $('.toggler').on('click', function() { 

    var fff = $(".toggled_content").html(); 

    if (!isNaN(fff)) { 

     console.log(parseInt(fff,10) + 1); 
     $(".toggled_content1").html(parseInt(fff, 10) + 1); 
    } 
}); 

}); 

Answer 2

Вам необходимо оставить счетчик для получения следующего S. no. Один из подходов может состоять в том, чтобы получить число уже вставленных элементов .form-group и добавить 1 к нему, чтобы получить следующий S. no.

$(document).ready(function($){ 
 
    $('.toggler').on('click',function(){ 
 
     var newSNum = $(".toggled_content1 .form-group").length + 1; 
 
     var fff = $(".toggled_content").html(); 
 
     $(".toggled_content1").append(fff); 
 
     $(".toggled_content1 .form-group").eq(newSNum - 1).find("input").val(newSNum); 
 
    }); 
 
});

.input-group 
 
{ 
 
    clear: both; 
 
    margin: 10px auto; 
 
} 
 

 
.toggler 
 
{ 
 
    border: thin solid red; 
 
    height: 50px; 
 
    width: 50px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="input-group"> 
 
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/> 
 
</div> 
 

 

 
<span class='toggler date'> 
 
    <a class="btn btn-condensed btn-sm"> 
 
     <div style="font-size:16px"> 
 
      <i class="fa fa-plus-square"></i> 
 
     </div> 
 
    </a> 
 
</span> 
 
<span class='toggler date' style='display:none;'> 
 
    <a class="btn btn-condensed btn-sm"> 
 
     <div style="font-size:16px"> 
 
      <i class="fa fa-plus-square"></i> 
 
     </div> 
 
    </a> 
 
</span> 
 

 
<div class='toggled_content1' style="padding-bottom:15px"></div> 
 

 

 
<div class='toggled_content' style='display:none;'> 
 
    <div class="form-group"> 
 
     <div class="col-md-2 col-xs-12"> 
 
      <div class="input-group"> 
 
       <input type="text" name="sno[]" class="form-control" placeholder="S. No."/> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>