JSFiddle - React, Tailwind, and code Playground

HTML

<h3>These forms can only be submitted once...</h3>

<div class="form-group">
  <form>
    <input type="text" placeholder="Form 1">
    <button type="submit">Submit</button>
  </form>
  <p>
    Submitted Value: 
    <span class="value"></span>
  </p>
</div>
<div class="form-group">
  <form>
    <input type="text" placeholder="Form 2">
    <button type="submit">Submit</button>
  </form>
  <p>
    Submitted Value: 
    <span class="value"></span>
  </p>
</div>
<div class="form-group">
  <form>
    <input type="text" placeholder="Form 3">
    <button type="submit">Submit</button>
  </form>
  <p>
    Submitted Value: 
    <span class="value"></span>
  </p>
</div>
<div class="form-group">
  <form>
    <input type="text" placeholder="Form 4">
    <button type="submit">Submit</button>
  </form>
  <p>
    Submitted Value: 
    <span class="value"></span>
  </p>
</div>
<div class="form-group">
  <form>
    <input type="text" placeholder="Form 5">
    <button type="submit">Submit</button>
  </form>
  <p>
    Submitted Value: 
    <span class="value"></span>
  </p>
</div>

CSS

.form-group {
  margin: 10px 0; 
}
p {
  margin: 0 0 30px 0;
}

JavaScript

/*
1. on submit, prevent default behavior
2. store reference to form in variable
3. record the initial value 
	(to prove you can't change after first submit)
4. disable form so it can't re-submit in the future. 
*/ 


$('form').submit(function(event){
	event.preventDefault();
  var form = event.target; 
  
	// record first value submitted, for demo purposes only
	var input_value = $(form).find('input').val(); 
  $(form).closest('.form-group').find('.value').text(input_value);
  
  // disable future submits
	$(form).find('[type="submit"]').prop('disabled', true); 
});