I stored an Id of a in a variable,variantId = $(this).prop('id') and noticed 2 different behaviors of Jquery: When I changed the prop of the <td> - jquery recognized the element stored in the variable although it was stored as a string,

let variantId;
$(document).on('click', ".tbl-itemClass", function () {
    variantId = $(this).prop('id');
    $(variantId).prop('contenteditable', true);//changed the prop

}).

but when I tried getting the value of the <span> nested in the <td>, using .text(), jquery only recognized the element stored in the variable when '#' was added

    on('input', function () {
            let newItemName = $('#' + variantId).find('span.item-description').text();
            //let newItemName = $(variantId).find('span.item-description').text(); //this line returned an empty string instead of the <span>s value.
        })

this is the full code:

let variantId;
        $(document).on('click', ".tbl-itemClass", function () {
            variantId = $(this).prop('id');
            $(variantId).prop('contenteditable', true);

        }).
            on('input', function () {
                let newItemName = $('#' + variantId).find('span.item-description').text();
                //let newItemName = $(variantId).find('span.item-description').text();
            });

This is my .csHtml (don't think it makes a difference, I'm using razor page, Asp.Net)

<tbody>
@foreach (var item in Model)
{
    <tr currentitemid=" @item.Id">
        <td class="tbl-itemClass desc" id="@("description"+ item.Id)" varianttype="@ViewBag.VariantType" >
            <span class="spnSpc">&nbsp;&nbsp;&nbsp;</span>
            <span style="width:90%; padding:1px 5px 1px 2px;" **class="item-description"** contenteditable> @item.Description </span>
        </td>
        
        <td class="tbl-itemClass ">//more code here
        </td>
    </tr>
}

Can you explain the difference please? Thanks!