title: ReferenceError: $ is not defined issue
body: <p>I'm just getting a error message in <strong>console</strong> that is <strong><em>Reference Error: $ is not defined</em></strong>. That's why my form data is not loading after click on radio buttion. Can you tell me what is the issue in my code ? Thank You. </p>
  
  <pre><code>&lt;form id='group'&gt;
  &lt;label&gt;&lt;input type="radio" name="group1" class="sim-micro-btn"/&gt;&lt;/label&gt;
  &lt;label&gt;&lt;input type="radio" name="group1" class="sim-mini-btn"/&gt;&lt;/label&gt; 
  &lt;label&gt;&lt;input type="radio" name="group1" class="sim-maxi-btn"/&gt;&lt;/label&gt;
  &lt;label&gt;&lt;input type="radio" name="group1" class="sim-mega-btn"/&gt;&lt;/label&gt;
  &lt;label&gt;&lt;input type="radio" name="group1" class="phone-smart-micro-btn"/&gt;&lt;/label&gt;
  &lt;label&gt;&lt;input type="radio" name="group1" class="phone-smart-mini-btn"/&gt;&lt;/label&gt;
  &lt;label&gt;&lt;input type="radio" name="group1" class="phone-smart-btn"/&gt;&lt;/label&gt;
  &lt;label&gt;&lt;input type="radio" name="group1" class="phone-smart-maxi-btn"/&gt;&lt;/label&gt;
  &lt;/form&gt;
  
  &lt;div class="billpay-internet-add-ons"&gt;
    &lt;div class="sim-micro-desktop"&gt;sim-micro&lt;/div&gt;
    &lt;div class="sim-mini-desktop"&gt;sim-mini&lt;/div&gt;
    &lt;div class="sim-maxi-desktop"&gt;sim-maxi&lt;/div&gt;
    &lt;div class="sim-mega-desktop"&gt;sim-mega&lt;/div&gt;
    &lt;div class="phone-smart-micro-desktop"&gt;phone-smart-micro&lt;/div&gt;
    &lt;div class="phone-smart-mini-desktop"&gt;phone-smart-mini&lt;/div&gt;
    &lt;div class="phone-smart-desktop"&gt;phone-smart&lt;/div&gt;
    &lt;div class="phone-smart-maxi-desktop"&gt;phone-smart-maxi&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('form#group').click(function(e) {
      var className = e.target.className.replace('btn', 'desktop');    
      $('.' + className).show().siblings().hide();
  });
  &lt;/script&gt;
  </code></pre>