从DIV中检索项目 - JS

Question

我可以从数据库中获取数据，并在我的代码中附加到panel。但问题出在页面加载上，例如，

这就是发生的事情

name   cost   sub-total  qty  pts
Books  12.00      120    10    2

Pencil 5.00       120     2    2

我期待什么

   name   cost   sub-total  qty  pts
    Books  12.00      120    10   2

    Pencil 5.00       10     2    2

发生的情况是，第一个项目的小计显示第二个项目的相同，只有当我在文档加载函数中包含Function()时才会出现这种情况。我似乎不知道为什么会这样？

PS：抱歉我的英语不好就是为什么我尝试用例子来解释

<script>
$( document ).ready(function() {

    @foreach ($grades->grade as $mark)
        var item = $('#{!! $mark->id !!}');    
    var ad = JSON.parse(item.attr('data-grade'));
    if(item.prop("checked") )  {
        $('.panel').append(
            '<div class="container"> '+ 

    '<p>  class="name" >'+ad.name+'</td>'+
    '<p  class="price" data-price="'+ad.price+'">'+ad.price+'</p>'+
    '<p class="total" ><span class="line-total" name="total" id="total"></span></p>'+
    '<input  type="text" class="form-control quantity"  placeholder=" qty " name="quantity[]" value="{!!$deliver->pivot->quantity!!}" required/>'+
    '<p class="pts-total" ><span class="point-total" name="pts-total" id="pts-total"></span></p>'+    
    '</div>'
            )
    }
    else {

        });
    }     }

    Function();

       @endforeach


});
</script>


<script>
var sum;
var total_points;
var Function = function() {


  var container = $('.panel').closest('div');

        var quantity = Number($('.quantity').val());
        var price = Number($('.panel').closest('div').find('.price').data('price'));    
       var points = Number($('.panel').closest('div').find('.points').data('points'));  

       container.find(".total span").text(quantity * price);
       container.find(".pts-total span").text(quantity * points);

        sum = 0;
       total_points = 0;

       $(".line-total").each(function(){
       sum = sum + quantity*price;
       })   


       $(".pts-total").each(function(){
       total_points = total_points + quantity*points;
       })    

       }
</script>