JSFiddle - React, Tailwind, and code Playground
HTML
<form action="/" class="generate-form">
<button type="submit">Submit generation form</button>
</form>
<form action="/" class="add-form">
<button type="submit">Add another form</button>
</form>
JavaScript
let index = 1;
function handleImageGeneration(event) {
alert('Generate!')
}
document.addEventListener('submit', function(event) {
event.preventDefault();
if (event.target.matches('.generate-form')) {
handleImageGeneration(event);
}
if (event.target.matches('.add-form')) {
const newForm = Array.from(document.querySelectorAll('.generate-form')).pop().cloneNode(true);
newForm.querySelector('button').innerText += ` ${++index}`;
document.body.prepend(newForm);
}
});