HTML5: Progress bar

<div id="divPorc" style="border:1px solid #000;background-color:#FFF;padding:5px;width:100px;text-align:center;">
   <span id="toopPorc"><?=$porcentaje;?>%</span>
   <span id="toopDinero">(<?=$db->Record['financiado'];?> &euro;)</span>
</div>
<div>
   <progress style="width:100%;" id="progressBar" value="<?=$db->Record['financiado'];?>" max="<?=$db->Record['prestamo'];?>"></progress>
   <hr>
</div>

<input type="text" class="form-control" required="" id="cantFinanciar"  placeholder="Indicar cantidad">

$("#progressBar").click(function(e) {
  posic = ($("#objetivoFinal").val() * e.offsetX) / 650;
  posic = parseInt(posic);

  if (posic > $("#financOrig").val()) {
      $("#progressBar").attr("value", posic);
      aPagar = posic - $("#financOrig").val();
      $("#cantFinanciar").val(aPagar);
      porc = (posic * 100) / $("#objetivoFinal").val();
      porc = parseInt(porc);
      $("#toopPorc").html(porc+"%");
           $("#toopDinero").html("("+posic+" &euro;)");
           $("#divPorc").css("margin-left", e.offsetX);
           $("#leftDivPorc").val(e.offsetX);
   }
});

$("#cantFinanciar").keyup(function (e) {
  if (e.keyCode != 8) { // borrar
     cantFinal = parseInt($("#financOrig").val()) + parseInt($("#cantFinanciar").val());
     if (cantFinal <= $("#objetivoFinal").val()) {
        $("#progressBar").attr("value", cantFinal);
        porc = (cantFinal * 100) / $("#objetivoFinal").val();
        porc = parseInt(porc);
        $("#toopPorc").html(porc + "%");
        $("#toopDinero").html("(" + cantFinal + " &euro;)");
        posicFinal = (porc * 605) / 100;
        posicFinal = parseInt(posicFinal);
        $("#divPorc").css("margin-left", posicFinal);
     }
     else {
        lastC = $("#cantFinanciar").val().slice(0, -1);
        $("#cantFinanciar").val(lastC);
     }
   }
});