This is a snippet of my HTML code:
<label for="first_name">First Name</label>
<input class="w3-input" type="text" name="first_name" id="first_name">
<label for="last_name">Last Name</label>
<input class="w3-input" type="text" name="last_name" id="last_name">
When clicking on an input, I want to hide the corresponding label in order to achieve certain results. I attempted to implement this using jQuery, but it doesn't seem to be working as expected.
$(document).ready(function(){
$(".w3-input").click(function(){
var item_select = this.id; //getting the ID of the clicked item
$(item_select).focusin(function(){
$(this).prev("label").hide(); //hiding the label of the clicked item
});
$(item_select).focusout(function(){
$(this).prev("label").show();
});
});
});
I'm confused about what's wrong with my code. Can anyone please help me solve this issue?
Thank you