<div class="left-top">
        <ul class="add">

        </ul>
        <ul style="float:right">
    <li id="total">0.0</li>
        </ul>
     </div>

  <div class="right-bottom">
     <div class="box2">
         <p>pkr 800.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 700.0</p>
       <img src="images/col.png" />
       <h1>Beverges</h1>
     </div>
     <div class="box2">
      <p>pkr 800.0</p>
       <img src="images/col.png" />
       <h1>Beverg</h1>
     </div>

<script type="text/javascript">
$(document).ready(function() {
  $('.box2').click(function(){
      //alert($(".add li:first").html());
      var price=$( this).find('p').html();
      var product=$( this).find('h1').html();
      //adding the values

      var price1=$(this).find('p').html();
      var currentValue=parseInt($("#total").text());
      var newValue =parseInt(currentValue) + price1;
      $("#total").text(newValue);
      //end of adding values
       if(product)
       {
           if($(".add li:first").html()== undefined)
                {
                 $('<li>', {html: price}).prependTo('.add');
                 $('<li>', {html: product}).prependTo('.add');

                }
           else
                {
                 $('<li>', {html: product}).appendTo('.add');
                 $('<li>', {html: price}).appendTo('.add');
                }
       }
  });
});
</script>

<p data-value="700">pkr 700.0</p>

<li id="total" data-vlue="0">$0</li>

var tot = parseInt($( this).find('p').attr('data-value'))
+ parseInt($('#total').attr('data-value'));
$('#total').attr('data-value', tot);
$('#total').html('$' + tot);

price1 = price1.replace("pkr ","") * 1;
var currentValue=parseInt($("#total").text());

$(document).ready(function() {
    findTot();
});

function findTot(){
   var total =0;
   $(".right-bottom").find("p").each(function(){
      total += parseInt($(this).html().split(" ")[1]);
   });
   $("#total").html(total);
}