How to insert input values to more populated fields with jQuery?

Question

I have inputs and I want to pass the values to populated fields using jQuery. So, the new populated inputs will have different values, based on main input.

I have tried so far with below commented jquery but its not working. I'm not familiar with jQuery and Im looking for help.

 $(document).ready(function () {
       $(".add-more").click(function () {
               //this inputs values
               var mat = $('#mat').val();
                var one= $('#qty').val();
                //to this inputs
               $('#admore').val(mat);
                $('#adqty').val(one);

               var html = $(".copy").html();
               $(".hide").after(html);

           });


        $("body").on("click", ".remove", function () {
            $(this).parents(".control-group").remove();
        });

    }); 

<div class="panel-body">
    <form action="#">
        <div class="input-group control-group after-add-more issue-from">
             <input id="mat" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
             <input id="qty" type="text" name="qty[]" class="form-control barcode_qty_select" placeholder="QTY">

              <div class="input-group-btn"> 
                   <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i></button>
              </div>
         </div>
   </form>
    <div class="divider">
    </div>

     <!-- Copy Fields -->
    <div class="copy hide total_sales">
         <div class="control-group input-group drop_result" style="margin-top:10px">
         <input id="admore" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
         <input id="adqty" type="text" name="qty[]" class="form-control barcode_qty" placeholder="QTY">
             <div  class="form-control barcode_price"></div>
                 <div class="input-group-btn"> 
                      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i></button>
                  </div>
             </div>
      </div>                              
  </div>

Answer 1

You have two problems there:

First: you shouldn't create two same id element in HTML. Also it will not cause any errors, but when you use id selector to selet them, it will only find one element. In your code ,you used copy var html = $(".copy").html();$(".hide").after(html); to create a new element.At the same time,you create a same id element in it.

Second: you were pass value before element created, so the element created after will not get the value. there the code I changed, hope you accept.

$(document).ready(function () {
  $(".add-more").click(function () {
    //this inputs values
    var mat = $('#mat').val();
    var one= $('#qty').val();

    var html = $(".copy").html();
    $(".hide").after(html);

    //to this inputs
    $('.admore').val(mat);
    $('.adqty').val(one);
  });
  $("body").on("click", ".remove", function () {
    $(this).parents(".control-group").remove();
  });
});
<div class="panel-body">
<form action="#">
    <div class="input-group control-group after-add-more issue-from">
        <input id="mat" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
        <input id="qty" type="text" name="qty[]" class="form-control barcode_qty_select" placeholder="QTY">

        <div class="input-group-btn">
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i></button>
        </div>
    </div>
</form>
<div class="divider">
</div>

<!-- Copy Fields -->
<div class="copy hide total_sales">
    <div class="control-group input-group drop_result" style="margin-top:10px">
        <input  type="text" name="addmore[]" class="admore form-control barcode_m" placeholder="Search or scan barcode..">
        <input  type="text" name="qty[]" class="adqty form-control barcode_qty" placeholder="QTY">
        <div  class="form-control barcode_price"></div>
        <div class="input-group-btn">
            <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i></button>
        </div>
    </div>
</div>

Answer 2

You are copying html(which contains textboxes), that's why after first add, there become multiple textboxes with same id. if you are looking to add multiple textboxes, you have to create them dynamically as

var count=1;
$(document).ready(function () {
   $(".add-more").click(function () {
           //this inputs values
           var mat = $('#mat').val();
            var one= $('#qty').val();
            //to this inputs
           if (count==1){
           $('#admore').val(mat);
            $('#adqty').val(one);
            }
            else{
            $('#admore'+count).val(mat);
            $('#adqty'+count).val(one);
            }
                            count++;
           //var html = $(".copy").html();
           var dyn = '<div class="control-group input-group drop_result" style="margin-top:10px">'
     dyn += '<input id="admore'+count+'" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">';
     dyn += '<input id="adqty'+count+'" type="text" name="qty[]" class="form-control barcode_qty" placeholder="QTY">';

  dyn += '</div>';
           $(".hide").after(dyn);

       });


    $("body").on("click", ".remove", function () {
        $(this).parents(".control-group").remove();
    });

}); 

i created a fiddle here https://jsfiddle.net/xpvt214o/147834/