associate number in number field with the number of newly created js div's

Question

I have a set of number input fields, labeled small & medium.., and a set of div's with the label small and medium. When you add a number to the small number input field a text input insertsAfter the div labeled small. When you subtract a number from the small number input field, the text input field that was recently added is removed. the adding and removing of the text input is be the last one in the list. This same thing goes for the medium number field and medium label/textfield

please see JSFiddle for reference http://jsfiddle.net/7PhJZ/53/

Right now my script is working correctly when I click the up or down buttons on the number field. But When I type in, for instance 5 in the small number field, only one new div/name input fields appears under the label small. I need the adding and subtracting of these input fields to be generated when I use the arrows and when I type in a number. So when I type in "5" 5 name/text input fields should appear under the associated label.

html :

<div id="product-1">
<div class="size-field">
    <div id="size-label">s</div>
    <div class="number-input">
        <input id="Small" class="product-quantity" type="number" name="Small" 
min="0" max="9999" data-product-id="1"></input>
    </div>
</div>
<div id="size-label">m</div>
<div class="number-input">
    <input id="Medium" class="product-quantity" type="number" 
name="Medium" min="0" max="9999" data-product-id="1"></input>
</div>
<div class="name-number-header">
    <h5>HEADER<h5></div>
<div class="name-number-field-container" data-size="Small">small:
</div>
    <div class="name-number-field-container" data-size="Medium">medium:
</div>
    </div>

<br clear="all">

<div id="product-2">    
<div class="size-field">
    <div id="size-label">s</div>
<div class="number-input">
    <input id="Small" class="product-quantity" type="number" name="Small" 
min="0" max="9999" data-product-id="2"></input>
</div>
 </div>
        <div id="size-label">m</div>
 <div class="number-input">
    <input id="Medium" class="product-quantity" type="number" name="Medium" 
 min="0" max="9999" data-product-id="2"></input>
</div>
<br clear="all">

<div class="name-number-header"><h5>HEADER<h5></div>
 <div class="name-number-field-container" data-size="Small">small:
 </div>
    <div class="name-number-field-container" data-size="Medium">medium:
 </div>
    </div>

js :

$('.product-quantity').each(function () {
    $(this).data('val', this.value);
}).on('change', function () {
    var val = $(this).val(),
        old = $(this).data('val'),
        input = $('<div/>', {'class': 'name-number-field'}).html('<input 
             class="name-field" name="name" placeholder="Name" type="text">'),
        ele = $(this).closest('[id^="product"]').find('[data-size="' + this.name + '"]'),
        inc = val >= old;

    if (inc) {
        $(input).insertAfter(ele.nextUntil(':not(.name-number-field)').last()
        .length ? ele.nextUntil(':not(.name-number-field)').last() : ele);
    } else {
        ele.nextUntil(':not(.name-number-field)').last().remove();
    }

    $(this).data('val', this.value);
});

Answer 1

See this fiddle

You need to put a for loop outside the code that created the elements:

  }).on('change', function () {
         var val = $(this).val(),
        old = $(this).data('val');
  for (var count=0; count<Math.abs(val-old) ; count++)
  {
       ...
  }

Update based on comments

See this updated fiddle. There were some problems that were in the original code:

1. The data was not initialised. Fix: if( !startVal || startVal.length == 0 )
2. The comparison was not with ints. Fix: inc = (parseInt(val) >= parseInt(old));

Answer 2

Your code is checking for the direction of change between old and new only, not how much difference there is. If it's an increase (of any amount), you add an element; if it's a decrease, you remove one.

You need to wrap that code in a loop and execute it as many times as the difference between old and new.

for (var i=0 ; i<Math.abs(val-old) ; i++) {
  if (inc) {
    $(input).insertAfter(ele.nextUntil(':not(.name-number-field)').last()
    .length ? ele.nextUntil(':not(.name-number-field)').last() : ele);
  } else {
    ele.nextUntil(':not(.name-number-field)').last().remove();
  }
}