如何显示相同的div次数是用户在jquery中输入的次数？

Question

I have POS system with cheque payments. when the cashier input the number of cheque according to the input the cheque detail form should generated.

Eg : if he enter Number 5, the same form should be display five times How can i do this with jquery.

I have attached up to what i have done so far !! Thanks in Advance

This is the user input

<input type="number" class="form-control" id="numberOfChq" >
<a id="come" class="btn btn-primary">Submit</a>

This is the div to be repeated <div id="chk_list" hidden></div>

This is the jquery i tried its displaying only once, i want to diplay as many user input

        $("#come").click(function(){
           var chqNumebr = $("#numberOfChq").val();
           var i;
           for (i= 1; i <= chqNumebr; i++ ){
          var chqSh = $("#chk_list").slideDown("slow");
         }
       });

Answer 1

Try the below.

First we need something to add the new divs into, so I created <div id="output"></div> for that.

After pressing submit, you'll see the new divs get added according the number the user entered. But we have to make sure that we empty #output every time the function runs otherwise the newly created divs would just keep adding onto the existing ones.

Secondly, if we are going to have multiple instances of #chk_list then it shouldn't have an ID as all ID's should be unique. Instead, we'll use a class.

 $("#come").on('click', function() { var chqNumebr = $("#numberOfChq").val(); //empty divs that are currently inside of #output $('#output').empty(); for (var i = 0; i < chqNumebr; i++) { $('#output').append('<div class="chk_list"></div>') } }); 

 .chk_list { width: 50px; height: 30px; background: red; margin-top: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" class="form-control" id="numberOfChq"> <a id="come" class="btn btn-primary">Submit</a> <div id="output"></div>