Display custom HTML5 data attributes from selected radio buttons
<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>