JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<div id="container">
  <div class="row">
    <input name="name[]">
    <select name="color[]">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </select>
  </div>
  <div class="row">
    <input name="name[]">
    <select name="color[]">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </select>
  </div>

  <a id="add-another" href="#">Add a row</a>
</div>

JavaScript

$("container").observe("change", function(ev) {
    console.log("changed " + ev.element() + " to " + $F(ev.element()));
  });

  $$("#container input, #container select").each(function(el) {
    el.observe("change", function(ev) {
      console.log("changed[2] " + ev.element() + " to " + $F(ev.element()));
    });
  });

  $("add-another").observe("click", function(ev) {
    var cloned = $("container").down(".rule").clone(true);
    $("container").insert({top:cloned});
    ev.stop();
  });