Динамический клон-элемент, когда пользователь указывает количество? - JavaScript + HTML

Question

Можно ли ввести в поле <input> размер элемента, который они хотели бы клонировать и добавить на страницу?

Проблема заключается в том, что когда пользователь в настоящее время указывает количество клонируемых элементов, количество элементов больше, чем клонирование на втором клике. Кроме того, можно ли скрыть исходный элемент, который будет клонирован в HTML и CSS? Приложите код ниже и код JsFiddle Link.

$("#btn").click(function() { 
 
    var number = document.getElementById("member").value; 
 
    var e = $('.col'); 
 
    for (i=0;i<number;i++) { 
 
     e.clone().insertAfter(e); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Specify Amount of Member Cards Required:<input placeholder="e.g. 2" type="text" id="member" name="member" value=""> 
 
<button id="btn" onclick="addinputFields()">Go</button> 
 

 
<div> 
 

 
</div> 
 
<br> 
 
<div class="col">Member Card</div>

Answer 1

Незначительное твик на HTML и JavaScript.

Код jsfiddle example приведенного ниже кода.

HTML

Specify Amount of Member Cards Required: 

<input placeholder="e.g. 2" type="text" id="member" name="member" value=""> 
<button id="btn">Go</button> 

<div id="colTemplate" class="col">Member Card</div> 
<div id="container"></div> 

CSS

/* hide the template */ 
#colTemplate { opacity: 0; visibility: hidden; } 

Javascript

$('#btn').click(() => { 
    let number = document.getElementById('member').value, 
     container = $('#container'), 
     template = $('#colTemplate'), 
     currentNumber = container.children().length; 

    if (currentNumber < number) { 
    // Add clones 
    for (let i = 0; i < number - currentNumber; i++) { 
     let clone = template.clone(true); 
     clone.attr('id', null); // Remove the id from the clone 
     container.append(clone); 
    } 
    } else if (number < currentNumber) { 
    // Remove extras 
    let extras = $('#container .col'); 
    for (let i = currentNumber - 1; i > number - 1; i--) { 
     extras.eq(i).remove(); 
    } 
    } 
}); 

Answer 2

Используйте :first селектор клонировать только первый

$('.col:first').hide(); 
$("#btn").click(function() { 
    var number = $("#member").val(); 
    var e = $('.col:first'); 
    $('.col').not('.col:first').remove(); 
    for (i=0;i<number;i++) { 
     e.show().clone().insertAfter(e); 
    } 
    $('.col:first').hide(); 

}); 

демо: https://jsfiddle.net/j4jmyh0q/