title: JavaScript not responding to checkboxes
body: <p>I have a page with checkboxes that have string values (A, B, C). I am trying to create an app that builds a string on the screen based on the values of the selected checkboxes, separated by the '+', for example 'A+B+C' or 'A+B', etc.</p>
  
  <p>Yet, my div is not showing when the checkboxes are selected. </p>
  
  <p>What am I doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
    var arr = $(".offers:checked").map(function() {
      return $(this).val();
    }).get();
    $('#displayConcatenatedString').html(arr.join('+'));
  &lt;/script&gt;
  
  &lt;div id="displayConcatenatedString"&gt;&lt;/div&gt;
  
  &lt;table style="width:100%"&gt;
    &lt;tr&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;label&gt;&lt;input type="checkbox" name="selected" value="A" class="offers" /&gt;A&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;label&gt;&lt;input type="checkbox" name="selected" value="B" class="offers" /&gt;B&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;label&gt;&lt;input type="checkbox" name="selected" value="C" class="offers" /&gt;C&lt;/label&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>