JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<h3>Event Title 1</h3>

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

  <h4>Attendee 1</h4>

  <div class="attendee-panel">
    <p>
      <label for="field_attendee_1__1" class="">First Name</label>
      <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendee_1__1" id="field_attendee_1__1" value="">
      </span>
    </p>
    <p>
      <label for="field_attendeelastname_1__1" class="">Last Name</label>
      <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeelastname_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="">
      </span>
    </p>
  </div>

  <h4>Attendee 2</h4>

  <div class="attendee-panel">
    <p>
      <label for="field_attendee_1__2" class="">First Name</label>
      <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendee_1__2" id="field_attendee_1__2" value="">
      </span>
    </p>
    <p>
      <label for="field_attendeelastname_1__2" class="">Last Name</label>
      <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeelastname_1__2" id="field_attendeelastname_1__2" value="">
      </span>
    </p>
    <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_attendee_1__3" class="">First Name</label>
      <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendee_1__3" id="field_attendee_1__3" value="">
      </span>
   ...

CSS

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

h3 {
  display: block;
  margin: 0;
  padding: 20px;
}

.attendee-accordion-group {
  padding: 0 20px;
}

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

a.button {
  display: inline-block;
  background: blue;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
}

.not-unique {
  border-color: red;
}

.input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.not-unique::after {
  content: "email must be unique!";
  display: block;
  position: absolute;
  left: 55%;
  top: 0;
}

JavaScript

$('.attendee-accordion-group').each(function(i, e) {
  var inputs = $(this).find('input[name*="_attendeeemail"]');

  inputs.change(function() {

    //Create array of input values
    var ar = inputs.map(function() {
      if ($(this).val() != '') return $(this).val()
    }).get();


    //Create array of duplicates if there are any
    var unique = ar.filter(function(item, pos) {
      return ar.indexOf(item) != pos;
    });
    
    console.log(unique);

    //show/hide error msg
    //(unique.lenght != 0) ? $(this).parent().addClass('not-unique'): $(this).parent().removeClass('not-unique');

    (unique.length != 0) ? $('.error').text('duplicates found'): $('.error').text('');

  });
});