jQuery script not working in web forms

Question

I made a simple jQuery to change css of row in table. I made it in JSFiddle and it's working perfectly there but when I put it into my web project it's not working.

Code here:

HTML:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="Buttons" id="button">Add row</button> 

    <table class="tg">
    <tr class="tr-5"><td>tr1</td></tr>
    <tr class="tr-10"><td>tr2</td></tr>
    <tr class="tr-15"><td>tr3</td></tr>
    </table>

CSS:

.tr-5{
  display:none 
}

.tr-10{
  display:none 
}

.tr-15{
  display:none 
}

jQuery:

 var counter = 0;

$("#button").bind("click",function() {
        counter++;
    switch(counter){
        case 1:
            $(".tr-5").css('display','block');
            break;
        case 2:
            $(".tr-10").css('display','block');
            break;
        case 3:
            $(".tr-15").css('display','block');
            counter=0;
            break;
    }
});

Here is JSFiddle: https://jsfiddle.net/37z2ww24/28/

I'm doing my web project in ASP.NET Web Forms.

Answer 1

Try keeping your JS code inside document.ready(function(){...})

$(document).ready(function() {
   var counter = 0;

   $("#button").bind("click",function() {
     counter++;
     switch(counter){
       case 1:
         $(".tr-5").css('display','block');
         break;
       case 2:
         $(".tr-10").css('display','block');
         break;
       case 3:
         $(".tr-15").css('display','block');
         counter=0;
         break;
      }
  });
})

Problem was: JS code was running before the DOM is ready. So, $("#button") was not binding since it was not loaded/ready while the script running.