How to change onclick attribute on html file?

Hey guys, i need your help.

This is what i want to do , i got this progress bar and i would like when i click the (link) to change the attribute of number (80) to 100:

data-pro-bar-percent="80" --> data-pro-bar-percent="100"

This is the code:

<a class="button" href="#">Click Link</a>
    <div class="pro-bar-container color-green-sea">
                    <div class="pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000">
                        <div class="pro-bar-candy candy-ltr"></div>
                    </div>
                </div>

Code (markup):

 

If you don't have any other pro-bar's then this should work:

$('.pro-bar').css('width', '50%');

Code (markup):

If you do have others, then you might want to add an ID attribute to the div and access it as so, otherwise all the other pro-bar's will get the same width.

 

Where do i post that what do i do? Yeah i don't have any other probar elements

Would you please tell me ? where i post this code?

Do i put them on script element inside in the head or above of the end of </body> tag?
Do i create a new file and save it and redirect with script src?

 

here is simple solution using javascript. i have given 'id' to the target div.

<a class="button" onclick="changeProgressBar()">Click Link</a>
    <div class="pro-bar-container color-green-sea">
                    <div id="pBar" class="pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000">
                        <div class="pro-bar-candy candy-ltr"></div>
                    </div>
                </div>

HTML:

<script>
function changeProgressBar() {
var valueToSet=80;
    var pBar=document.getElementById('pBar');
    pBar.setAttribute('data-pro-bar-percent',valueToSet);
}
<script/>

Code (JavaScript):