JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div id="accordion">
    <h3>Entries</h3>
    <div>
        <form id="entryForm">
            <select name="category">
                <option value="">Choose category...</option>
	    	    <option value="ActionScript">ActionScript</option>
		        <option value="AppleScript">AppleScript</option>
                <option value="Asp">Asp</option>
            </select><br/>
            <select name="subcategory">
                <option value="">Choose sub category...</option>
		        <option value="Haskell">Haskell</option>
    		    <option value="Java">Java</option>
	    	    <option value="JavaScript">JavaScript</option>
            </select><br/>
            <input type="text" name="comments"/><br/>
            <button>Copy the data</button>
        </form>
    </div>
    
    <h3>Summary</h3>
    <div>
        <form id="summaryForm" name="summaryform" method='POST' action='processRequest.php'>
            <label>Location</label>
            <input type='text' name='category' /><br/>
            <label>Floor</label>
            <input type='text' name='subcategory' /><br/>
            <label>Room</label>
            <input type='text' name='rm' /><br/>
            <input type="submit" value="Submit"/>
        </form>
    </div>
</div>

JavaScript

$( "#accordion" ).accordion();

$('button', $('#entryForm')).click(function(e) {
    e.preventDefault();

    $('input[name="category"]', $('#summaryForm')).val(  $('select[name="category"]', $('#entryForm')).val()  );
    
    $('input[name="subcategory"]', $('#summaryForm')).val(  $('select[name="subcategory"]', $('#entryForm')).val()  );
    
    $('input[name="rm"]', $('#summaryForm')).val(  $('input[name="comments"]', $('#entryForm')).val()  );
});