jquery - How do i take sum by selecting checkbox and values in span and show total in another span -

i need select checkbox , grab values span , show sum in span having id of amount

 <div class="col1">           <div class="field">             <div class="label-wrap">               <label class="required" for="buy_form_pwd2">books required</label>             </div>             <div class="input-wrap">               <input type="checkbox" id="you-are" name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">250</span><br><hr style="margin:0;">               <input type="checkbox" id="you-are" name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">375</span><br><hr style="margin:0;">               <input type="checkbox" id="you-are" name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">350</span><br><hr style="margin:0;">               <input type="checkbox" id="you-are" name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">200</span><br><hr style="margin:0;">               <input type="checkbox" id="you-are" name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;">               <input type="checkbox" id="you-are" name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;">             </div>           </div>         </div>         <div class="extra-col">           <ul>             <li><span class="autorization-redirect"><b>total amount</b></li><hr>             <li style="text-align:right;"><span class="autorization-redirect">rs.</span><span class="autorization-redirect" id="amount"></li>           </ul>         </div> 

try : first of must use unique ids each element in dom, either remove id="you-are" or make unique each checkbox. follow same other elements.

you can write click handler checkbox , add values of price variable sum of checked checkbox. show value in amount span.

note - have removed ids checkbox inputs , added closing span tag amount span.

$(function(){    var totalamount = 0;    $('input[name="total"]').change(function(){      //get last span before br element , read text.      var $pricespan = $(this).nextuntil('br').last();      var amount = parseint($pricespan.text()) * (parseint($pricespan.prev('span').find('input').val()) || 1);        //if checked add amount otherwise substract it.      if($(this).is(':checked'))       {         totalamount += amount;       }       else        {          totalamount -= amount;        }      //show total amount in amount span      $('#amount').html(totalamount);    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="col1">    <div class="field">  <div class="label-wrap">    <label class="required" for="buy_form_pwd2">books required</label>  </div>  <div class="input-wrap">    <input type="checkbox"  name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">250</span><br><hr style="margin:0;">    <input type="checkbox"  name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">375</span><br><hr style="margin:0;">    <input type="checkbox"  name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">350</span><br><hr style="margin:0;">    <input type="checkbox"  name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">200</span><br><hr style="margin:0;">    <input type="checkbox"  name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;">    <input type="checkbox"  name="total">book name<span style="margin-left:10px;">price</span><span style="margin-left:10px;">no of books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;">  </div>    </div>  </div>  <div class="extra-col">    <ul>  <li><span class="autorization-redirect"><b>total amount</b></li><hr>  <li style="text-align:right;"><span class="autorization-redirect">rs.</span><span class="autorization-redirect" id="amount"></span></li>    </ul>  </div>