title: Can only change font-family of text with jQuery once
body: <p>I am having trouble changing the font-family of my text with jQuery.</p>
  
  <p>My html:</p>
  
  <pre><code>&lt;select id="message-font-selection" class="promo"&gt;
                          &lt;option value="Oswald"&gt;Oswald&lt;/option&gt;
                          &lt;option value="Open Sans"&gt;Open Sans&lt;/option&gt;
                          &lt;option value="Montserrat"&gt;Montserrat&lt;/option&gt;
                          &lt;option value="Indie Flower"&gt;Indie Flower&lt;/option&gt;
                          &lt;option value="Poiret One"&gt;Poiret One&lt;/option&gt;
                      &lt;/select&gt;
  
  
  &lt;div class="middle-section"&gt;{{middle_msg}}&lt;/div&gt;
  </code></pre>
  
  <p>My js:</p>
  
  <pre><code>$('#message-font-selection').change(function() {
      $('.middle-section').css('font-family',$(this).val());
  });
  </code></pre>
  
  <p>The problem is that I can only change the font once. However, when I try selecting a different font-family for the 2nd, 3rd, 4th, etc... time, the font no longer visibly changes. However, when I inspect the element, I can see that the font-family style for that text is indeed being changed... but those changes are not reflected on the screen...
  I have basically the same exact code for font-color and that seems to work just fine. </p>