javascript - addEventListener not working when used within addClass -

i have written following html, using material design lite progress bar:

<div class="mdl-grid">     <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">         <div id="stepprogress" class="mdl-progress mdl-js-progress"></div>     </div> </div> <div class="mdl-grid">     <div id="step1-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">         <h5 class="text-center">step 1</h5>     </div>     <div id="step2-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">          <h5 class="text-center">step 2</h5>     </div>     <div id="step3-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">          <h5 class="text-center">step 3</h5>     </div> </div>  <div id="firstnext" class="box-style">next</div> 

tha layout looks great. when button pressed changes background on each of steps indicate step user in, using following jquery:

jquery('#step1-title').addclass('box-active'); jquery('#firstnext,#step2-title').click(function(){      jquery('#step1').hide();     jquery('#step2').show();     jquery('#step3').hide();     jquery('#step1-title').removeclass('box-active');     jquery('#step2-title').addclass('box-active');     jquery('#step3-title').removeclass('box-active');  }); 

i trying update progress bar following isn't working when next button pressed:

document.queryselector('#stepprogress').addeventlistener('mdl-componentupgraded', function() { this.materialprogress.setprogress(33); }); 

(from google's site here: https://getmdl.io/components/#loading-section)

i've created following jsfiddle https://jsfiddle.net/storm/7a84vqz7/

the example code on provided link, reacts mdl-componentupgraded event, assuming background process updates component. although don't know underlying workings, seems can set set progress directly via:

document.queryselector('#stepprogress').materialprogress.setprogress(33);