how to append and remove div based on textbox value

April 28, 2022

Here is my code i want to append data based on all three textbox if textbox value is 2 and textbox2’s value is 3 and textbox3’s value is 1 the The result will be 2 apple 3banans and 1 cherry and user can also remove items with textbox value
I have tried to make this code but it is removing all items could you please help me to solve this problem

$(".change_qty").change(function(){
    var total = $(this).val();
    var oldLength = $(".box > span").length;
    var change = total - oldLength;
  var data_text= $(this).data("text");

    if (change > 0) {
        for (i = 0; i < change; i++) {
            $(".box").append(`<span >${data_text}<br /></span>`);
        }
    }
    else {
        change = Math.abs(change)
        $( ".box > span" ).each(function( index ) {             
            $(this).remove();
            if (index == (change -1)) {
                return false;
            }
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input class="form-control input-sm change_qty"  type="number" data-text="apple">
<input class="form-control input-sm change_qty"  type="number" data-text="bananas">
<input class="form-control input-sm change_qty"  type="number" data-text="cherry">

 <div class="box" ></div>

>Solution :

$(".box > span").length does not regard your different input types. It might be easier to clear everything and recreate the whole output on change. That way the entries also keep the order of input.

$(".change_qty").change(function(){
  //REM: Remove all entries
  $(".box").empty();

  //REM: Recreate all entries
  $(".change_qty").each(function(){
    let tThis = $(this);
    let tText = tThis.data('text');
    let tQuantity = Math.abs(tThis.val());
    
    //REM: Append quantity of entries to .box
    for(let i=0, j=tQuantity; i<j; i++){
      $(".box").append(`<span >${tText}<br /></span>`)
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control input-sm change_qty"  type="number" data-text="apple">
<input class="form-control input-sm change_qty"  type="number" data-text="bananas">
<input class="form-control input-sm change_qty"  type="number" data-text="cherry">

<div class="box" ></div>