Multiplying checkbox item in a group to relative number field

I have a code that multiplies checkbox item to a number field when selected. When there's multiple items in one checkbox array it only multiplies the first. How i do i separate the checkbox group? should a create a unique name and script for each item?

JSFiddle Here

Here's my HTML:

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

and here's the script

$(document).ready(function () {
    var sum = 0;
    var qty = 0;

    $("input[type=checkbox]").change(function () {
        if ($('.1').is(':checked')) {
            $('.checked-1').show(); 
        } else {
            $('.checked-1').hide();
        }
    });
     $('.qty').bind('keyup mouseup', function () { // if user typed anyting in the Quantity
          sum = parseInt($('.1').val()); // get checkbox value and change the data type to int
          qty = parseInt($(this).val()); // get Quantity value and change the data type to int
          //console.log(sum,qty);
          if(sum && qty) { // if the values was not empty
              $('#total').text(sum * qty); // show the result in the total element
          } else { // if the values was empty
              $('#total').val(''); // clear the result textbox
          }
     });
});

I wanted to have have multiple items inside one checkbox array

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

And when I do that, the code goes awry. Thanks in advance!