<form className="add-portal-user" action="">
<div data-cont="header">
<h3>Input user firstname and surname:</h3>
<ul>
<li htmlFor="firstname">
<input type="text" name="firstname" id="firstname" placeholder="Jonh"/>
</li>
<li htmlFor="surname">
<input type="text" name="surname" id="surname" placeholder="Jonhson"/>
</li>
</ul>
</div>
<div data-cont="content">
<h3>Input account data:</h3>
<ul>
<li htmlFor="login">
<input type="text" name="login" id="login" placeholder="Login"/>
</li>
<li htmlFor="password">
<input type="password" name="password" id="password" placeholder="Password"/>
</li>
<li id="son">
<h4>Input contact data:</h4>
<ul>
<li htmlFor="email"><input type="email" name="email" id="email" placeholder="EMail" /></li>
<li htmlFor="country">
<select name="country" id="country">
<option>Select user country</option>
<RegionList />
</select>
</li>
</ul>
</li>
</ul>
</div>
<div data-cont="footer">
<label htmlFor="role">Select user role:</label>
<select name="role" id="role">
<option value="admin">Portal administrator</option>
<option value="moderator">Portal moderator</option>
<option value="dev">Portal developer</option>
</select>
<button type="submit" className="add-but">Add admin portal user</button>
</div>
</form>$('.add-portal-user > div ul li input').keyup(function(){
sessionStorage.setItem('query-' + this.name, this.value);
});
$('.add-portal-user > div select, .add-portal-user > div ul li select').change(function(){
sessionStorage.setItem('query-' + this.name, this.value);
});
$('.add-portal-user').on('input', 'input', function(){
sessionStorage.setItem('query-' + this.name, this.value);
});