Jquery hasclass problem

See more:

HTML

jQuery

Im having an issue with jquery's .hasClass

i have a table with some data inside and i am trying to create a custom function for when i click on a table row to set it with the class 'selected' and then get the data-id of the clicked tr then i want to set a button from disabled='disabled' to enabled.

I have managed to get the function to set the clicked table row with the class 'selected' but when i click on the class again i want it to remove the class 'selected' and then set the button to disabled again and the hasClass method is returning false on the table row for 'selected' so i cant set it to deselect the row and disable the button again...

the table is html:

<table class="table table-hover">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Comments</th>
<th>Created</th>
<th>Due</th>
<th>Creator</th>
<th>%</th>
<th>Type</th>
</tr>
</thead>
<tbody id="taskstbody"><tr class="table-row  taskGrpRow" data-id="chkTask1" id="chkTask1">
<td class="taskGrpRow"></td>
<td class="taskGrpRow">Test Task</td>
<td class="taskGrpRow">This is a task example</td>
<td class="taskGrpRow">1 week ago</td>
<td class="taskGrpRow">in 2 Weeks </td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">0%</td>
<td class="taskGrpRow"></td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">3%</td>
<td class="taskGrpRow">^__i class="fas fa-cclipboard-check"> Follow Up</td>
</tr><tr class="bg-success table-row fh-checkbox taskGrpRow selected" data-id="chkTask3" id="chkTask3">
<td>^__i class="fas fa-check-square" style="color: #26C350; font-size: 26px"></td>
<td>Example Task</td>
<td>Example of a completed task</td>
<td>1 month ago</td>
<td>1 Week ago</td>
<td>admin</td>
<td>100%</td>
<td>^__i class="fas fa-clipboard-list"> To Do</td>
</tr></tbody>
</table>

the function for my table row click:

<script> 
$(document).ready(function(){

var prevSel ="";
var taskid = "";

	$("tr.table-row.taskGrpRow").click(function() {
		
		var _prevSel = "#" + prevSel;
		var _curSel = "#" + $(this).data("id");
		//only one task selection at a time so check if the previous selection is set and remove selected class
		
		if(_prevSel === "#"){
		
		console.log("Previous Selection: Empty");
		
		}else if(  _prevSel !== undefined && _prevSel !==  _curSel){
		
		
		}else{
		
		console.log("Previous Selection:" + _prevSel);
		
		$(_prevSel).removeClass("selected");
		
				
		}
		

		
		var taskid = $(this).data("id");
		
		console.log("Task Selected: " + taskid); 
		
	var itemSelected = "#" + taskid;	
	var classSelected = $(itemSelected).hasClass("selected");
	
	console.log($(itemSelected).className + " | " + classSelected);
	
	console.log($(this));
	
	if(classSelected === true){
	
	console.log("Class '.selected Present' on " + $(this).attr("id"));
	$(itemSelected).removeClass("selected");
	$("#selectedTaskDropdown").prop("disabled", true);
	
	}else{
	
	console.log("Class '.selected Not Present' on " + $(this).attr("id"));
	
	$(this).addClass("selected");
	$("#selectedTaskDropdown").prop("disabled", false);
	}
	
	prevSel = taskid;
		
	});
	
})

</script>

classSelected is returning false and when i check the developer console for inspect element the table row has the class 'selected' so i am really stumped as to why jquery isnt returning hasClass as true..

any help would be great,

thanks in advance.

What I have tried:

i have tried using a html selector '#chkTask3', using $(this) and none of them work. each way its returning false, i really dont understand why its returning false when the DOM clearly shows that the table row with id 'chkTask3' has the class 'selected' in the class element.

ive even tried to replicate the whole thing on jsfiddle and its doing the same on there too

select row and enable a button - JSFiddle[^]