JSFiddle - React, Tailwind, and code Playground

by BaronGrivet

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<form id="form">
 <input type="text" value="1"/>
 <input type="text" value="2"/>
 <input type="text" value="3"/>
 <input type="text" value="4"/>
 <input type="text" value="5"/>
 <input type="text" value="6"/>
</form>

<div id="output"></div>

CSS

input {
  display: block;
  border: 1px black solid;
}

.randomising {
  border: 1px red solid;
}

JavaScript

var formTimer = setInterval(function() {}, 200);

$('#form input').each(function(){
	var randomNumber = Math.round(Math.random()*5000);
  var $input = $(this);
  $input.addClass('randomising');
  var waitToRandomise = window.setTimeout(function(){
  	$input.val(randomNumber);
    $input.removeClass('randomising');
    $('#form').submit();
  }, randomNumber);
});

$('#form').submit(function(event){
	event.preventDefault();
  
  var formTimer = setInterval(function() {
		var inputsRandomising = $('.randomising').length;
		if (inputsRandomising == 0) {
			$('#output').append('Form Submitted<br/>');
			clearInterval(formTimer);
		}
	}, 200);
  
});