JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dev.joshmoto.wtf/iris/dist/iris.min.js"></script>
<div class="iris-wrapper">

</div>

<div class="iris-wrapper">

</div>

<div class="iris-wrapper">

</div>

JavaScript

// gform prepend
gformInputPrepend = function(elem, content) {

  // find element human
  $input = $(elem).find('INPUT');

  // check if input group does not exist
  if (!$(elem + ' .input-group').length > 0) {

    // wrap the input with prepend and input group
    $input.wrap('<div class="input-group"></div>').before(
      '<div class="input-group-prepend">\n' +
      '<span class="input-group-text">' + content + '</span>\n' +
      '</div>\n');

  } else {

    // if prepend element does not exist then add it
    if (!$(elem + ' .input-group-prepend').length > 0) {

      // prepend the prepend span
      $(elem).find('.input-group').prepend('<div class="input-group-prepend">\n' +
        '<span class="input-group-text">' + content + '</span>\n' +
        '</div>\n');

    }

  }

}


$('.iris-wrapper').each(function() {

  var field = $(this);

  console.log(this);

  // prepend color picker
  gformInputPrepend(field, '');

});