Can't get Value of an Input element to use as parameter for dataSource Read Request in Kendo UI for ASP.Net MVC

Question

I am using Kendo UI for ASP.Net MVC and Below is my MultiSelect for a List property of my model. In DataSource Read I am giving a js Function name "userIdFilter"

@(Html.Kendo().MultiSelectFor(m => m.PositionIds)
          .Filter("Contains")
          .Name("PositionIds")
          .Placeholder("Select Position")
          .ValuePrimitive(true)
          .DataTextField("Name")
          .DataValueField("Id")
          .DataSource(d => d.Read(read =>
          {
              read.Action("GetAllPositions","PositionCodeAjax").Data("userIdFilter");
          }).ServerFiltering(true))
          .HtmlAttributes(new { style = "width:95%;" })

this is userIdfilter method in a script tag

<script>
    function userIdFilter() {
          console.log($("#Id").val());

          setTimeout(() => console.log($("#Id").val()), 100);

        return { userId: $("#Id").val() };
    }

</script>

This is the numeric text box that has id="Id". I have applied display:none to its parent element

@(Html.Kendo().NumericTextBoxFor(m => m.Id).Enable(false))

All these snippets lie in a PopupEditView.cshtml which is called when editing/creating and element from the grid in my index.cshtml file

Now When I run my project ad Test the UI manually, I press edit button/command Edit pop up appears and userIdFilter is called. and value "0" is printed. after 100ms value "1182" is printed. Also my actionMethod recieves value 0.

But when I call userIdFilter() from console it logs value 1182 (the correct value) also object { userId: 1182 } is also logged and after 100ms value 1182 is printed.

Also if I happen to inspect the multiselect in the popup before the request with wrong value for dataSource is sent, Kendo makes a second request with correct value and it works as it should

I just cannot understand this strange behaviour and what is going wrong. Need help