JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<form id="summaryForm" name="summaryform" method='POST' action='processRequest.php'>
<div id="accordion">
    <h3>Menu 1</h3>
    <div>
        <label>Category</label>
        <select name="category" class="changeable" data-summary="summCategory">
            <option value="">Choose category...</option>
     	    <option value="ActionScript">ActionScript</option>
	        <option value="AppleScript">AppleScript</option>
            <option value="Asp">Asp</option>
        </select><br/>
        <label>SubCategory</label>
        <select name="subcategory" class="changeable" data-summary="summSubCategory">
            <option value="">Choose sub category...</option>
            <option value="Haskell">Haskell</option>
    		<option value="Java">Java</option>
	    	<option value="JavaScript">JavaScript</option>
        </select><br/>
        <label>Comments</label>
        <input type="text" name="comments" class="changeable" data-summary="summComments"/><br/>
    </div>
    
    <h3>Menu 2</h3>
    <div>
        <label>Location</label>
        <input type='text' name='text1'  class="changeable" data-summary="summText1"/><br/>
        <label>Floor</label>
        <input type='text' name='text2'  class="changeable" data-summary="summText2"/><br/>
        <label>Room</label>
        <input type='text' name='text3'  class="changeable" data-summary="summText3"/><br/>
    </div>

    <h3>Summary</h3>
    <div id="summary">
        <p>Category: <span id="summCategory"></span></p>
        <p>SubCategory: <span id="summSubCategory"></span></p>
        <p>Comment: <span id="summComments"></span></p>
        <p>Text 1: <span id="summText1"></span></p>
        <p>Text 2: <span id="summText2"></span></p>
        <p>Text 3: <span id="summText3"></span></p>
        <input type="submit" name="submit" value="Submit"/>
    </div>


</div>

CSS

#accordion {font-size: 13px; }
label { display: inline-block; width: 100px;  }
.changeable { width: 250px; }
#summary span { color: red; font-weight: bold; }

JavaScript

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

$('.changeable').change(function() {
    $('#'+$(this).data('summary')).text( $(this).val() );
})