JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<form class="upload-form-js" method="post" enctype="multipart/form-data">
    
        <!-- IMAGE DETAILS COMPONENT. THESE COMPONENTS ARE OUTPUTTED WITH A WHILE LOOP--> 
        
        <div class="upload-details-component">                
            <div class="image-wrapper">
                <img src="image.jpg">
            </div>
            <div class="edit-zone">
                <div class="form-row">
                    <label for="image-title">Image Title</label>
                    <input id="title-title" class="input-title" type="text" name="image-title[]">
                </div>
                <div class="form-row">
                    <label for="tags">Comma Separated Image Tags</label>
                    <textarea id="tags" class="text-area" type="text" name="image-tags[]"></textarea>
                </div>
                <div class="form-row">
                    <!-- DELETE BUTTON -->
                    <button name="upload-details-delete" value="12" class="remove-image">DELETE</button>
                    <input type="hidden" name="image-id[]" value="12">
                </div>
            </div>
        </div>

        <!-- IMAGE DETAILS COMPONENT - END -->

    <div class="form-row upload-details-submit-row">
        <button id="upload-submit" class="upload-details-submit" type="submit" name="upload-submit">COMPLETE UPLOADS</button>
    </div>

</form>

JavaScript

//As mentioned there is one button using an id so there's no need for additonal lookups.
 const upbloadSubmit = document.querySelector('#upload-submit')

 document.onkeydown = function(e) {
 console.log(e)
	/* 		const { value } = e.target
			const lastValue = [...value][value.length - 1]
			
			  
			
			   if (lastValue === '
			   ') {
			console.log('yes')
			      e.preventDefault()
			   }
			   
			   e.stopImmediatePropagation();
			    e.preventDefault() */
 }