title: Display custom HTML5 data attributes from selected radio buttons
body: <p>I am attempting to retrieve custom data attributes from selected <code>radio buttons</code> from multiple button groups and display them for the user. </p>
  
  <p>Here is an example of the <code>radio buttons</code> I am working with:</p>
  
  <pre><code>&lt;input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool"/&gt;
  &lt;input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool"/&gt;
  
  &lt;input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping"/&gt;
  &lt;input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping"/&gt;
  
  &lt;span id="quote-items" name="quote-items"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I am currently using this <code>jQuery</code> to extract the data attributes from the selected <code>radio buttons</code> but currently only the top-most <code>radio button</code> loaded in the <code>DOM</code> will only display as my output:</p>
  
  <pre><code>var itemNames = [$(".calc:checked").attr("data-selection-name")];
    $("#quote-items").text(itemNames)
  </code></pre>
  
  <p>Thanks!</p>