JSFiddle - React, Tailwind, and code Playground

by shojikun

HTML

<head>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<a href="www.google.com">test</a>
<div id="header">
    <h3>
      <i class="fas fa-file-signature ml-1 mr-3"></i>{{ __('Requisition Management') }}
      <small>
        <i class="fas fa-caret-right ml-3 mr-3"></i>{{ __('Request Form') }}
        <i class="fas fa-caret-right ml-3 mr-3"></i>{{ __('Step 1') }}
      </small>
    </h3>
</div>
<main class="shadow border">
  <div class="form-group row">
    <div class="col-sm">
      <h3>{{ __('Requisition Order') }}</h3>
    </div>
  </div>
  <hr>
  @if ($message = Session::get('error'))
  <div class="alert alert-danger">
    <h4 class="alert-heading"><i class="fas fa-exclamation-circle mr-3"></i>Error</h4><hr>
    <span>{{ ($message) }}</span>
    @role('user')
    <br><span>Contact your Administrator for further information.</span>
    @endrole
  </div>
  @endif
  <!-- form start -->
  <form action="{{ route('requisitionmanages.confirm') }}" method="post">
    <div class="form-group row">
      <div class="col-sm">
        <div class="alert alert-danger fade show" role="alert">
          <strong>{{ __('Note :') }}</strong> {{ __('Maximum of 10 requisition field only.') }}
        </div>
      </div>
    </div>
    <h3>{{ __('Request Details') }}</h3>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Requisition #') }}</label>
      <div class="col-sm-4 input-group">
        <div...

JavaScript

$(document).ready(function() {

  //prevent from leaving form pages
  $('a').on('click',function(e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#modal-leaving').modal({
      backdrop: 'static',
      keyboard: false
    });
    $('.modal-footer').find('form').attr('action',link);
  });

  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
    });
  }, 7000);
  
  let $append = $('#append');

  function partnumberData() {
    $append.on('change','.partnumber-ctrl', function() {
      var item = $(this).data('item');
      var values = $(this).val();
      $('.productid-' + item).val($('#products [value="' + values +'"]').data('productid'))
      $('.category-' + item).val($('#products [value="' + values + '"]').data('category'));
      $('.code-' + item).val($('#products [value="' + values + '"]').data('code'));
      $('.partnumber-' + item).val($('#products [value="' + values + '"]').data('partnumber'));
    });
  }

  function enableSerial() {
    $append.on('change','.enable-serial', function() {
      var item = $(this).data('item');
      $('.enable-' + item).prop('disabled', !this.checked);
    });
  }

  function ctrlSerial() {
    $append.on('click','.keyin-ctrl', function() {
      var item = $(this).data('item');
      var result = $('.serial-' + item).val() + '; \n';
      $('.display-' + item).append(result);
      $('.serial-' + item).val('').focus();
      $.result.val('');
    });

    $append.on('click','.undo-ctrl', function() {
    	var item = $(this).data('item');
    	$('.display-' + item).html('');
    });
  }

  $('#add_product').on('click', function() {
    var itemNo = $('.product-item').length + 1;
    var appendData =  '<div class="product-item" data-item="' + itemNo +'">' +
      '<span>#' + itemNo +'</span>' +
      '<div class="form-group row">' +
         '<label class="col-sm-2 col-form-label font-weight-bold">{{ __("Partnumber") }}</label>' +
   ...