Jquery Sortable retrieve hidden Id on change

i am using the jquery sortable arrange images in a certain order, all i want to do is on change get the hidden id of the image and the new current position number so i can run an ajax request to update the new position in my database, however when i change the image position the alert is not triggered(in below code) so i am wondering what i am doing wrong.

Jquery code

<script>
        $(function() {
            $("#sortable").sortable({
                stop: function(event, ui) {

                    $('input.imageHiddenImageId').each(function(idx) {

                        var imageId = (this).val();
                        alert("New position: " + ui.item.index() + "id:" + imageId);
                        //Run some AJAX code to server
                    });

                }
            });
            $( "#sortable" ).disableSelection();
        });
    </script>

HTML code

<ul id="sortable">
   <li class="ui-state-default">
      <img src="http://localhost/site/gallery/3.png" style="max-width: 100%; height: auto;">
      <input type="hidden" class="imageHiddenImageId" id="imageHiddenImageId" name="imageHiddenImageId" value="45">
      <input type="hidden" id="imageHiddenNo" name="imageHiddenNo" value="2">
    </li>
 </ul>

Thanks for the help