Adding additional DIV input based on user input in jQuery - html

Question

I'm creating function where user will insert number of value. And additional div of input will appear based the number of value of user have input previous div.
example
Insert number of user : `2`
Additional input based on number of user input
name :
name :
If user put 3 there will be 3 name and if user change it into 2 there will be 2 name.
How do I fix it in order to achieve the example that I want.
$('#user').hide();
$("#user_num").change(function()
{
$("#user").remove();
let m = $(this).val();
for (var i = 0; i < parseInt(m); i++){
$('#user').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="info">
<div class="col-lg-12 mb-30">
<label><b><span style="color:#e60000;">*</span><i>Insert number of user </i></b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="number" placeholder="2" id="user_num" required >
</div>
</div>
<div class="col-lg-12 mb-30" id="user">
<label><b><span style="color:#e60000;">*</span><i> Name </i></b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="name" required >
</div>
</div>
</div>

Answer 1

You where close to achieve it with your attempt. You needed to implement an event handler that executes a function when the input field value is changed. You can achieve this with .on('change', function(){ // do something })
Every time the function is executed it clears the html inside <div id="inputs-container"></div> and the loop appends html code to that div n times.
Try the following snippet
$('#in').on('change', function(){
let n = $(this).val()
let html_code = 'name: <input value="" style="margin-top:5px"><br>';
$('#inputs-container').html('');
for (var i = 0; i < n; i++){
$('#inputs-container').append(html_code);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="info" style="margin:10px">
Insert number of users: <input id="in" value="" />
<div id="inputs-container" style="margin-top:20px">
</div>
</div>
Note: I updated the jQuery CDN to the latest one. You where using an
older version.