title: I want to display the badge number dynamically using javascript for bootstrap button
body: <p>In CSS though I have given the badge number as <code>0</code>, dynamically it should be changed by jQuery/JavaScript. Following code I tried but that didn't work:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload='preventDefault()'&gt;
  &lt;div class="container"&gt;
    &lt;button class="btn btn-sm btn-default like-btn active" type="button" id="10"&gt;
      &lt;span class="text"&gt;Alert&lt;/span&gt;
      &lt;span class="badge like-badge"&gt;0&lt;/span&gt;
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;script&gt;
   preventDefault = function(){
   var btnText = $(this).find(".btn-text")       
   var badge = $(this).find(".like-badge")
   var count = parseInt(badge.text());
   if ($(this).hasClass('active')) {
          btnText.text("Like");
          badge.text(2);
          $(this).removeClass('active');
      }
    else {
          btnCaption.text("Liked");
          badge.text(count + 1);
          $(this).addClass('active');
      }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>