Jquery mobile Multiselect with filterable selection issue after filteration is done

Question

I am trying to use jquery mobiles custom select with filterable feature for multiselect.

It works great when I dont filter the options. But when I filter the option the selection is not happening properly.

It checks some other option from the list.

demo on jsfiddle

In jsfiddle demo, once u open the dropdown, I which will apply the filter and then try to select English and see the issue

Below it the code

<div class="page_1">
    <!-- Form Starts -->
    <div class="form_wrap" id="form_wrapper">
        <form method="post" name="frm_registration" autocomplete="off"  style="margin:0px">
            <div class="formfd_wrap ">
                <label>Mother Tongue</label>
                <select id="mother_tongue" name="mother_tongue" multiple="multiple" data-native-menu="false" class="filterable-select reg_inputdrpbox">
                    <option value="Assamese" >Assamese</option>
                    <option value="Bengali" >Bengali</option>
                    <option value="English" >English</option>
                    <option value="Gujarati" >Gujarati</option>
                    <option value="Hindi" >Hindi</option>
                    <option value="Kannada" >Kannada</option>
                    <option value="Odia" >Odia</option>
                    <option value="Pashto" >Pashto</option>
                    <option value="Persian" >Persian</option>
                    <option value="Punjabi" >Punjabi</option>
                    <option value="Rajasthani" >Rajasthani</option>
                    <option value="Russian" >Russian</option>
                    <option value="Sanskrit" >Sanskrit</option>
                    <option value="Sindhi" >Sindhi</option>
                    <option value="Sinhala" >Sinhala</option>
                    <option value="Spanish" >Spanish</option>
                </select>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    ( function( $ ) {

        function pageIsSelectmenuDialog( page ) {
            var isDialog = false,
            id = page && page.attr( "id" );
            $( ".filterable-select" ).each( function() {
                if ( $( this ).attr( "id" ) + "-dialog" === id ) {
                    isDialog = true;
                    return false;
                }
            });
            return isDialog;
        }

        $.mobile.document
        // Upon creation of the select menu, we want to make use of the fact that the ID of the
        // listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
        // We retrieve the listview and insert a search input before it.
        .on( "selectmenucreate", ".filterable-select", function( event ) {
            var input,
            selectmenu = $( event.target ),
            list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
            form = list.jqmData( "filter-form" );
            // We store the generated form in a variable attached to the popup so we avoid creating a
            // second form/input field when the listview is destroyed/rebuilt during a refresh.
            if ( !form ) {
                input = $( "<input data-type='search' placeholder='Search'></input>" );
                form = $( "<form></form>" ).append( input );
                input.textinput();
                list
                .before( form )
                .jqmData( "filter-form", form ) ;
                form.jqmData( "listview", list );
            }
            // Instantiate a filterable widget on the newly created selectmenu widget and indicate that
            // the generated input form element is to be used for the filtering.
            selectmenu
                .filterable({
                    input: input,
                    //children: "> option[value]"
                    children: "option[value]"
                })
                // Rebuild the custom select menu's list items to reflect the results of the filtering
                // done on the select menu.
                .on("filterablefilter", function (event, ui) {
                });
        })
        // The custom select list may show up as either a popup or a dialog, depending on how much
        // vertical room there is on the screen. If it shows up as a dialog, then the form containing
        // the filter input field must be transferred to the dialog so that the user can continue to
        // use it for filtering list items.
        .on( "pagecontainerbeforeshow", function( event, data ) {
            var listview, form;
            // We only handle the appearance of a dialog generated by a filterable selectmenu
            if ( !pageIsSelectmenuDialog( data.toPage ) ) {
                return;
            }
            listview = data.toPage.find( "ul" );
            form = listview.jqmData( "filter-form" );

            //$(".ui-checkbox-off").addClass("custome-ui-checkbox-off");
            //$(".ui-checkbox-on").addClass("custome-ui-checkbox-on");

            // Attach a reference to the listview as a data item to the dialog, because during the
            // pagecontainerhide handler below the selectmenu widget will already have returned the
            // listview to the popup, so we won't be able to find it inside the dialog with a selector.
            data.toPage.jqmData( "listview", listview );
            // Place the form before the listview in the dialog.
            listview.before( form );

            $("div[data-role='header']").find("a[role='button']").removeClass('ui-btn-icon-notext');
            $("div[data-role='header']").find("a[role='button']").html('Cancel');
            // $("div[data-role='header']").html()
        })
        //This event is triggered after the change request has finished loading the page into the DOM and all page transition animations have completed.
        .on( "pagecontainerbeforehide", function( event, data ) {
            $("div[role='dialog']").css({"position":"fixed","top":"0","left":"0","margin":"0"});
         })                        
        // After the dialog is closed, the form containing the filter input is returned to the popup.
        .on( "pagecontainerhide", function( event, data ) {
            var a = $(window).height() - $("div[data-role='header']").height()  - $( "div[data-role='content']" ).find( "form" ).outerHeight()+"px";

            $("div[role='dialog']").css({"position":"fixed","top":"0","left":"0","margin":"0", "height":$(window).height()}); 

            $(".ui-content").css({"height":a});

            $( "div[data-role='content']" ).find("ul").css({"overflow-y":"scroll", "height":a});

            var listview, form;
            // We only handle the disappearance of a dialog generated by a filterable selectmenu
            if ( !pageIsSelectmenuDialog( data.prevPage ) ) {
                return;
            }
            listview = data.prevPage.jqmData( "listview" );
            form = listview.jqmData( "filter-form" );

            // Put the form back in the popup. It goes ahead of the listview.
            listview.before( form );

            //added to get dialog box again (not part of demo example)
            $("input[data-type='search']").val("").focus().trigger("change");                                
        }); 
    })( jQuery );
</script>

I have tried many things but couldn't solve it.

You can check the custom select menu with filter here on jquery demo page.