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>
<!-- Gravity forms html mark up below -->

<div class="container pt-3">
  <form>
    <ul class="gform_fields form-row">
      <li id="field_1" class="gfield col-12">
        <label>Percentage Mark-up</label>
        <div class="ginput_container">
          <input type="number" class="form-control" />
        </div>
      </li>
      <li id="field_2" class="gfield col-12 mb-3">
        <label>Percentage Mark-up</label>
        <div class="ginput_container">
          <input type="text" class="form-control" />
        </div>
      </li>
    </ul>
  </form>
</div>

SCSS

.form-row {
  list-style: none;
  padding: 0;
}

JavaScript

// gform prepend input group
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 the complete .input-group
    $input.wrap('<div class="input-group">\n' +
      '<div class="input-group-prepend">\n' +
      '<span class="input-group-text">' + content + '</span>\n' +
      '</div>\n' +
      '</div>');

  } else {
  
  	// this is working fine

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

  }

}


// gform prepend input group
gformInputAppend = 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 the complete .input-group
    $input.wrap('<div class="input-group">\n' +
      '<div class="input-group-append">\n' +
      '<span class="input-group-text">' + content + '</span>\n' +
      '</div>\n' +
      '</div>');

  } else {
  
    // this is working fine

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

  }

}


// do stuff

gformInputPrepend('#field_1','https://');
gformInputAppend('#field_1','domain.com');

gformInputAppend('#field_1','domain.com');