Hemant Vishwakarma: Show Progress bar with limit and completed values in jQuery Ui

I have a requirement to show progressed value and remaining value in Progress Bar.

Here is my html content.

<html>

<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 <style>
 .bar {
    width: 100px;
    height: 20px;
    margin: 2px;
    border: 1px solid black;
    background-color: lightgreen;
    text-align: center;
    float: left;
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    border-radius: 3px;
  }

  .list {
    background-color: lightblue;
    border: 1px solid gray;
  }

  .items .ui-selected {
    background: red;
    color: white;
    font-weight: bold;
  }

  .items {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
  }

  .items li {
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    border-radius: 3px;
  }

  .weekday {
    float: left;
  }

  .availablelist {
    background-color: orange;
    display: inline;
  }
   </style>
   </head>

  <body>
   <div style="float:left;width:500px;">
   <div><h2>Total Credits = <span id="total-credits">80</span></h2> </div>
 </div>

<div style="clear:both"></div>
<br>
<div id="timetable" style="float:left;width:700px;">    
  <div class="weekday">
     <ul class="items">
        <li class="list">
        <label class="core-ins-tag-numb">Jhonny</label>
        <input type="hidden" value="15" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Tim</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
       <label class="core-ins-tag-numb">George</label>
        <input type="hidden" value="25" name="credits" class="credits">
        </li>
        <li class="list">
       <label class="core-ins-tag-numb">Melissa</label>
        <input type="hidden" value="20" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Alice</label>
        <input type="hidden" value="5" name="credits" class="credits">
        </li>
    </ul>
</div>
<div class="weekday">
    <ul class="items">
        <li class="list">
        <label class="core-ins-tag-numb">Jhonny</label>
        <input type="hidden" value="20" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Tim</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">George</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Melissa</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Alice</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
    </ul>
</div>
<br>

 <div id = "progressbar"></div>
 </div>
 <script>
$(function () {
    $("#timetable .items").sortable({
        connectWith: "ul"   
    });        

    /* for progress bar */ 
    var progressbar = $( "#progressbar" );
    $( "#progressbar" ).progressbar({
       value: 0,
       max:300
    });

    function progress() {
       var val = progressbar.progressbar( "value" ) || 0;
       progressbar.progressbar( "value", val + 1 );
       if ( val <= 00 ) {
          setTimeout( progress, 100 );
       }
    }
    setTimeout(progress, 3000);
    /* for progress bar */ 
});

I have a hidden value for each li items with some credits, so Whenever any li is dragged from right and dropped to left side, I need to sum the value of each left hand side li credits and match with the Total credits and show the Progress bar with values like below Image