Clicking on form label focuses the wrong input box - php

Question

I have a form that contains two input boxes for first and last name.
When I click the "Last Name" label, the cursor focuses on the "First Name" field (instead of the "Last Name" field as expected). How do I fix this problem?
$(document).on('click', 'a', function() {
$('div.tabClass').addClass('hide');
$($(this).attr('href')).removeClass('hide');
} );
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action='' method='POST'>
<ul>
<li>
<a href='#first'>
First Tab
</a>
</li>
<li>
<a href='#secound'>
Second Tab
</a>
</li>
<li>
<a href='#third'>
third Tab
</a>
</li>
<li>
<a href='#fourth'>
Fourth Tab
</a>
</li>
</ul>
<div id='first' class='hide tabClass'>
<label>
First Name :
<input type='text' name='name' id='name'>
<br/>
<label>
Last Name :
<input type="text" name='sname' id="sname">
<input type="submit" value="Click">
</div>
</form>

Answer 1

You need to associate the labels with the input fields.
<label for="name">
First Name :
<input type="text" name="name" id="name">
</label>
<label for="sname">
Last Name :
<input type="text" name="sname" id="sname">
</label>
As #Sumurai8 mentioned in the comments, the <label> element requires a closing tag, which is missing from your code.