Pushing attribute value to two different arrays based on radio options selected

In short, if a user selects yes to a radio option, I'm trying to obtain the data-name attribute from that input and push it to an array called accepted_array.

If a user selects no, then store data-name to declined_array.

Here is a visual to the markup:

<div class="guest__options-group">
  <input id="attending-yes-0" type="radio" name="attendance-0" value="yes" data-name="John" required />
  <label for="attending-yes-0">Yes</label>
</div>

<div class="guest__options-group">
  <input id="attending-no-0" type="radio" name="attendance-0" value="no" data-name="John" required />
  <label for="attending-no-0">No</label>
</div>

<!-- options for Alex -->

<div class="guest__options-group">
  <input id="attending-yes-1" type="radio" name="attendance-1" value="yes" data-name="Alex" required />
  <label for="attending-yes-1">Yes</label>开发者_C百科
</div>

<div class="guest__options-group">
  <input id="attending-no-1" type="radio" name="attendance-1" value="no" data-name="Alex" required />
  <label for="attending-no-1">No</label>
</div>

Here are 2 approaches I've experimented with:

First approache.

(function ($) {

  $( ".guest__attendance-input" ).each(function(index) {
    $(this).on("click", function(){

      var $this = $(this);
      var checkedVal = $this.val();
      var accepted_array = [];
      var declined_array = [];

      if( checkedVal == "yes" ) {
        var name = $this.data("name");
        accepted_array.push(name);
      } else {
        declined_array.push(name);
      }

      console.log("accepted " + accepted_array.join(","));
      console.log("declined " + accepted_array.join(","));

    });

  });

}) (jQuery);

This only executes for the selected user and adds the name to both arrays.

Second approache.

(function ($) {

  $( ".guest__attendance-input" ).each(function(index) {
    $(this).on("click", function(){

      var $this = $(this);
      var data = [];
      var checked = $this.is(':checked');
      var name = $this.attr('data-name');
      
      if (checked) {
        if (!data[name]) {
          data[name] = []
        }
        data[name].push($this.val())
      }
      console.log(data);
    });

  });

}) (jQuery);

Which only adds the user to a single array.

If both select yes, I need both names in the accepted_array. If someone selects yes initially and then selects no I need to remove them from the accepted_array and vice versa.

You can use splice with inArray to remove value from array if someone selects yes initially and then selects no and vice versa.

Example:

var accepted_array = [];
var declined_array = [];
$('.guest__options-group > input[type=radio]').on('change', function() {
  var $this = $(this);
  var name = $this.data("name");
  var checkedVal = $this.val();
  var name = $this.data("name");
  if (checkedVal == "yes") {
    accepted_array.push(name);
    declined_array.splice($.inArray(name, declined_array), 1);
  } else {
    declined_array.push(name);
    accepted_array.splice($.inArray(name, accepted_array), 1);
  }
  console.log("accepted " + accepted_array.join(","));
  console.log("declined " + declined_array.join(","));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- options for John -->

<div class="guest__options-group">
  <input id="attending-yes-0" type="radio" name="attendance-0" value="yes" data-name="John" required />
  <label for="attending-yes-0">Yes</label>
</div>

<div class="guest__options-group">
  <input id="attending-no-0" type="radio" name="attendance-0" value="no" data-name="John" required />
  <label for="attending-no-0">No</label>
</div>

<!-- options for Alex -->

<div class="guest__options-group">
  <input id="attending-yes-1" type="radio" name="attendance-1" value="yes" data-name="Alex" required />
  <label for="attending-yes-1">Yes</label>
</div>

<div class="guest__options-group">
  <input id="attending-no-1" type="radio" name="attendance-1" value="no" data-name="Alex" required />
  <label for="attending-no-1">No</label>
</div>