JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 -->
 <form>
  <h3>Event Title 1</h3>

  <div class="attendee-accordion-group">

    <h4>Attendee 1</h4>

    <div class="attendee-panel">

      <p>
        <label for="field_attendeename_1__1" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_1__1" id="field_attendeelastname_1__1" value="">
      </span>
      </p>
      <p>
        <label for="field_attendeeemail_1__1" class="">Email</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_1__1" id="field_attendeeemail_1__1" value="test1@email.com">
      </span>
      </p>
    </div>

    <h4>Attendee 2</h4>

    <div class="attendee-panel">
      <p>
        <label for="field_attendeename_1__2" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_1__2" id="field_attendeelastname_1__2" value="">
      </span>
      </p>
      <label for="field_attendeeemail_1__2" class="">Email</label>
      <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_1__2" id="field_attendeeemail_1__2" value="">
      </span>
      </p>
    </div>

    <h4>Attendee 3</h4>

    <div class="attendee-panel">
      <p>
        <label for="field_attendeename_1__3" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_1__3" id="field_attendeelastname_1__3" value="">
      </span>
      </p>
      <p>
        <label for="field_attendeeemail_1__3" class="">Email</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_1__3" id="field_attendeeemail_1__3" value="test1@email.com">
      </span>
      </p>
    </div>

  </div>

  <h3>Event Title 2</h3>

 ...

CSS

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px
}

h3 {
  display: block;
  margin: 0 0 15px 0;
  font-size: 18px;
}

h4 {
  padding: 0;
  margin: 0 0 15px 0;
  font-size: 15px;
}

form {
  padding: 20px;
}

.attendee-accordion-group {
  padding: 40px;
  border: 1px solid #999;
  margin-bottom: 20px;
}

input {
  border: 1px solid #ccc;
  width: 50%;
  line-height: 1;
  height: 20px;
}

.button {
  display: inline-block;
  background: #0274be;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-bottom: 20px;
}

JavaScript

var errorMessage = '';
$('.attendee-accordion-group').each(function() {
  var inputs = [];
  $(this).find('input').each(function() {
    var input = {'name':$(this).attr('name'), 'value':$(this).val()};
    inputs.push(input);
  });
  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    var conflict = inputs.find(function(item) {return inputs.indexOf(item) !== i && item.value === input.value && item.value;});
    if (conflict) {
      errorMessage += 'Value of form name ' + input.name + ' already exists on form name ' + conflict.name + '.<br>\n';
    }
  }
});
$('div.error')[0].innerHTML += errorMessage;