JSFiddle - React, Tailwind, and code Playground

by ForceGaia

HTML

<label for="spdates">Special Dates:</label>

<p>
  <select id="spdates">
    <option data-date='new' value='new'>New Date</option>
    <option data-date='23/05/1992' value='23/05/1992'> 23/05/1992-jake</option>
    <option data-date='15/08/1997' value='15/08/1997'> 15/08/1997-rebecca</option>
    <option data-date='17/03/1995' value='17/03/1995'> 17/03/1995-clive</option>
  </select>
</p>
<p>
  <label for="spname">Special Name:</label>
  <input class="widefat namspani" id="spname" type="text" value="" />
</p>
<p>
  <label for="sptext">Special Text:</label>
  <input class="widefat namspani" id="sptext" type="text" value="" />
</p>
<p>
  <label for="spdate">Special Date(dd/mm/yyyy):</label>
  <input class="widefat namspani" id="spdate" type="date" value="" />
</p>
<p>
  <label for="spimage">Special Image:</label>
  <br />
  <input type="text" class="img anisp" id="spimage" value="" />
  <input type="button" class="select-imgsp" value="Select Image" />
</p>

<select id="eventNames" name='widget-dates_widget[__i__][eventNames][]' multiple hidden>
  <option data-date='23/05/1992' value='[23/05/1992]jake' selected> jake</option>
  <option data-date='15/08/1997' value='[15/08/1997]rebecca' selected> rebecca</option>
  <option data-date='17/03/1995' value='[17/03/1995]clive' selected> clive</option>
</select>
<select id="eventText" name='widget-dates_widget[__i__][eventText][]' multiple hidden>
  <option data-date='23/05/1992' value='[23/05/1992]yay me' selected> yay me</option>
  <option data-date='15/08/1997' value='[15/08/1997]rebecca' selected> rebecca</option>
  <option data-date='17/03/1995' value='[17/03/1995]clive' selected> clive</option>
</select>
<select id="eventImages" name='widget-dates_widget[__i__][eventImages][]' multiple hidden>
</select>

JavaScript

$(function() {

  //onchange for the date select to populate the other boxes
  $(document).on('change', 'select#spdates', function(evt) {
    var date = $(this).find(":selected").attr("data-date");
    if (date == "new") {
      //new date selected, discard what's in the boxes and blank values
      $(".namspani").val("");
    } else {
      //different date selected, discard what's in the boxes and blank values
      alert($("#eventNames").find("[data-date='" + date + "']").text());
      $("#spname").val($("#eventNames").find("[data-date='" + date + "']").text()); //grab from other lists
      $("#sptext").val($("#eventText").find("[data-date='" + date + "']").text());
      $("#spdate").val(date);
      $("#spimage").val($("#eventImagess").find("[data-date='" + date + "']").text());
    }
  });
})