title: Saving the value of a selected radio button to a dictionary
body: <p>I'm trying to save the value of the radio button that is selected and store the value into a dict to send back to the server as a <code>JSON</code>. For all other <code>input types</code> I refer to their <code>data-name</code> and <code>val()</code> to get both keys and values. </p>
  
  <p>I couldn't do this for radio button values so instead I get the value of the radio button and store it manually. The problem is that it not only updates the latest value for that particular record displayed it overrides all previous values with this new value, which I don't want. </p>
  
  <p>This is the JQuery:</p>
  
  <pre><code> radioVal='school';
  
   $('.metwhere').on('change', function() {
       radioVal = $('input[name=met' + index + ']:checked').val();
   });
  
   $(document).on('click', '.send', function(e) {
      e.preventDefault();
      var contactDataToSend = [];
      $('.contact').each(function () {
          var data = {};
          $(this).find(':input[data-name]').each(function () {
              data[$(this).data('name')] = $(this).val();
  
          });
          data['metAt']=radioVal;
          contactDataToSend.push(data);
      });
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code>&lt;input type="radio" class="metwhere" name="met' + index + '" value="tradeshow"   id="tradeshow' + index + '"&gt;&lt;label for="" class="control-label text-muted"&gt;  &lt;b&gt;&amp;thinsp;Tradeshow&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
  &lt;input type="radio" class="metwhere" name="met' + index + '" value="flight" id="flight'   +     index + '"&gt;&lt;label for="" class="control-label text-muted"&gt;&lt;b&gt;&amp;thinsp;Flight&lt;/b&gt;&lt;/label&gt;    &lt;br&gt;
  &lt;input type="radio" class="metwhere" name="met' + index + '" value="train" id="train' +     index + '"&gt;&lt;label for="" class="control-label text-muted"&gt;&lt;b&gt;&amp;thinsp;Train&lt;/b&gt;    &lt;/label&gt;    &lt;br&gt;
  &lt;input type="radio" class="metwhere" name="met' + index + '" value="hotel" id="hotel' +    index + '"&gt;&lt;label for="" class="control-label text-muted"&gt;&lt;b&gt;&amp;thinsp;Hotel&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
  </code></pre>
  
  <p>How can I amend this to only use <code>radioVal</code> to not override previous records: Or is there a method in which <code>data-</code> attribute can be used to capture only the selected radio button value?</p>