JSFiddle - React, Tailwind, and code Playground

by konglie

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div class="form-group">
    <div class="row clonedInput berijarakbawah" id="entry1">
        <div class="col-sm-4">
          <input type="text" name="kode[]" value="" id="kode" class="form-control kode typeaheadcode1" placeholder="" required="required" autocomplete="off" />
        </div>
    </div>
    <button type="button" id="btnAdd" class="btn btn-success">Add</button>
    <button type="button" id="btnDel" class="btn btn-default" disabled="disabled">Del</button>
</div>

CSS

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #ccc;
}

.tt-menu {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);

  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 15px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}

JavaScript

$('#btnAdd').click(function() {
/**
    var num = $('#kode').length,
        newNum = new Number(num + 1),
        newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow');

    $('#entry' + num).after(newElem);
    $('#btnDel').attr('disabled', false).show('slow');

    newElem.find('.kode').removeClass('typeaheadcode' + num).addClass('typeaheadcode' + newNum).val('');
    newElem.find('.ukuran').val('');
    newElem.find('.jumlah').val('');

    typeee('.typeaheadcode'+newNum);
 */
 		var newElem = $('#entry1').clone();
    $(newElem).attr({
    	id: 'entry' + $('.clonedInput').length
    });
    $(newElem).insertBefore('#btnAdd');
    var typeInput = $(newElem).find('.kode').val('');
    typeee(typeInput);
    $('#btnDel').attr('disabled', false).show('slow');
});

$('#btnDel').click(function() {
	$('.clonedInput:last').remove();
  if($('.clonedInput').length <= 1){
  	$(this).attr('disabled', true).hide('slow');
  }
});


$('#btnAdd').attr('disabled', false).show('slow');
$('#btnDel').attr('disabled', true).hide('slow');

var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
        var matches, substringRegex;

        // an array that will be populated with substring matches
        matches = [];

        // regex used to determine if a string contains the substring `q`
        substrRegex = new RegExp(q, 'i');

        // iterate through the pool of strings and for any string that
        // contains the substring `q`, add it to the `matches` array
        $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
                matches.push(str);
            }
        });

        cb(matches);
    };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan',...