title: how to change the font size using jquery from the dropdown list
body: <pre class="lang-html prettyprint-override"><code>&lt;div class="card"&gt;
    &lt;div id="name" class="badge"&gt;
      &lt;div id="address" class="badge"&gt;
      &lt;/div&gt;
      &lt;select id="font-size"&gt;
        &lt;option value="12"&gt;12&lt;/option&gt;
        &lt;option value="14"&gt;14&lt;/option&gt;
        &lt;option value="18"&gt;18&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>I have the main div with class "card" which has many other divs inside. I want to change the div's font size from the dropdown.</p>
  
  <p>jQuery code is:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(".badge").click(function(){
      var id = this.id;//get clicked id
  
      $("#font-size").change(function(){
         $("#"+id).css('font-size', $(this).val()+"px");//change font according to the clicked element
      });
  });
  </code></pre>
  
  <p>My problem is that when first div (name) is clicked everything works fine. But when the second div is clicked then first is also bound. And font size is changed for both. I want the font size to change independently according to the div clicked.</p>