JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<br>
<button class="copy">
  Copy
</button>
|
<button class="reset">
  Reset
</button>
<div class="from">
  <div class="form">
    <label>Text
      <input type="text" name="foo" />
    </label>
    <br>
    <label>Pass
      <input type="password" name="bar" />
    </label>
    <br>
    <label>Num
      <input type="number" name="num" />
    </label>
    <br>
    <input type="checkbox" name="baz" /> Baz
    <br>
    <label>
      <input type="radio" value="1" name="bap" /> One</label>
    <label>
      <input type="radio" value="2" name="bap" /> Two</label>
    <label>
      <input type="radio" value="3" name="bap" /> Three</label>
    <br>
    <textarea name="ta"></textarea>
    <br>
    <select name="s1">
      <option></option>
      <option>Foo</option>
      <option>Bar</option>
    </select>
    <br>

    <select name="s2" multiple size=3>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
</div>

<div class="to">
</div>
</div>

CSS

.form {
  margin: 1em;
  border: 2px solid gray;
  padding: 1em;
}

.from .form {
  border-color: blue;
}

.to .form {
  border-color: red;
}

JavaScript

var $f;
$('body').on('click', 'button.copy', function() {
  $('.to').empty();
  var $newF = $('.form');

  if ($newF.length) {
    $f = $newF;
    $f.detach();
  }
  var clone = $f.clone(true);
  $('.to').append(clone);
  //copyValues($f, clone, 'select, textarea');
  copySelect($f);
});

$('body').on('click', 'button.reset', function() {
  if ($f) {
    $('.to').empty();
    $('.from').append($f);
  }
});

function copySelect($from) {

  var $select = $from.find('select');

  if ($select.length) {
    $select.each(function() {
      var $this = $(this),
        $name = $(this).attr('name'),
        $value = $this.val();
      $('.to').find('select[name="' + $name + '"]').val($value);
    });
  }
}

function copyValues(origin, clone, elementSelector) {
  var $originalElements = origin.find(elementSelector);

  clone.find(elementSelector).each(function(index, item) {
    item.value = $originalElements.eq(index).val();
  });
}