Dynamic progress bar in ASP.NET with Javascript

I have this bar:

    #myProgress {
      width: 100%;
      background-color: #ddd;
    }

    #myBar {
      width: @Model.avance%; //El avance lo cargo de una variable que me traigo de sql
      height: 30px;
      background-color: #007bff;
      text-align: center;
      line-height: 30px;
      color: white;
}

HTML:

 <div class="col-50">
            <div id="myProgress">
                <div id="myBar" name="ctlBarra" value="@Model.avance" onclick="increase()">@Model.avance</div>
            </div>
        </div>

Javascript:

var value = document.getElementById("myBar");
tb = document.getElementById("#myBar");
progress = document.getElementById("#myProgress"); //store these, it's better

function increase() {
    value = value+10; // same as value += 1, but better
    if (value >= 100) value = 100; //keep it under 100%
    tb.value = value; // set the value of the text field     
    progress.style.width = value + "%"; // set the width of the progress bar
}

The example is taken from the internet .. what it does is that when I click on a part of the bar, it increases by 10% in 10% the detail is in the html that I can not update the label that indicates the percentage that has the bar, any idea of com can do it?