An interesting question in regarding element Id

An interesting question in regarding element Id

Here is a simple html textbox in my form.
< input type =" text" class =" form-control InteractionText" id =" InteractionFinalText" / >
Now when I am accessing this textbox value in jQuery I am not getting the value entered in it by writing like this
var s= $(".InteractionText").value
(OR)
var s = $( " #InteractionFinalText" ). value 
(OR)
var s = $( " #InteractionFinalText" ). val()
Interestingly it is working fine when I am accessing like this, it was so surprising for me why we should access by Index value, moreover why with second index.?
$(".InteractionText")[2].value
Note that i am sure in my page only one element with class "InteractionText", of course if I access with id also I am facing the same issue.?
Is I am missing any simple point in fundas of jQuery.? Or what causes this kind of scenario, any help will reduce my headache.