title: Updating text for a badge inside a bootstrap button?
body: <p>With a click event I'm trying to update two pieces of a button:</p>
  
  <ol>
  <li><p>The button text</p></li>
  <li><p>The badge count</p></li>
  </ol>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;button class="btn btn-sm btn-default like-btn" type="button" id="10"&gt;     
    &lt;span class="glyphicon glyphicon-thumbs-up"&gt;&lt;/span&gt;Liked
    &lt;span class="badge like-badge active"&gt; 1&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>When calling this jquery code it's returning both pieces of text: (e.g. "Liked 1")</p>
  
  <pre><code>$(document).on("click", ".like-btn", function(e) {
          e.preventDefault ();
  
          var btnID = $(this).attr('id');
          var likeText = $(this).text();
  
          console.log("TEXT: " + likeText);
  
          if ($(this).hasClass('active')) {
              // How Do I decrement the count and change the "Liked" text to "Like" ?
          }
          else {
             // How Do I increment the count and change the "Like" text to "Liked" ?
          }
      });
  </code></pre>
  
  <p>Any thoughts?</p>
  
  <p>Thanks</p>