JavaScript Progress bar regrememnet on按钮单击“ essue bootstrap”

我遇到的这个问题是第一次单击上传按钮，进度栏正在增加，但是当您按下模态的关闭按钮时，它将关闭模态，然后再次单击在添加附件上打开模态，然后再次按上传 - 进度栏不会增加。我认为这可能是JavaScript不循环的问题。请帮助。

$(document).ready(function() {
  $("#reset").click(function() {
    $(':input', '#attachmentModal').val("");
    $("#pbarmain").hide();
    $("#pbar").hide();
  });
});
var i = 0;
function makeProgress() {
  console.log("testing")
  $("#pbarmain").show();
  if (i < 100) {
    i = i + 4;
    $(".progress-bar").css("width", i + "%").text(i + " %");
    setTimeout("makeProgress()", 100);
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="pbarmain" style="display: none" class="progress progress-striped active">
  <div id="pbar" class="progress-bar"></div>
</div>
<button type="button" onClick="makeProgress()" class="btn btn-default">Upload</button>
<button type="button" id="reset" class="btn btn-default" data-dismiss="modal">Close</button>