Sorting of divs in Jquery

My code have divs of movies which are used to display movie with poster, now i want jquery to sort divs for me on basis of title,

<!-- Movie -->
            <div class="movie" title="Reservoir Dogs">                  
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0105236">Reservoir Dogs</a> |
                        Reservoir Dogs</span></span><img src="http://ift.tt/1cLskB2" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Saw">                 
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0387564">Saw</a> |
                        Saw</span></span><img src="http://ift.tt/1JVGcU9" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Scarface">                    
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0086250">Scarface</a> |
                        Scarface</span></span><img src="http://ift.tt/1cLsmZq" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Signs">                   
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0286106">Signs</a> |
                        Signs</span></span><img src="http://ift.tt/1JVGcUb" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in3">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Stir of Echoes">                  
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0164181">Stir of Echoes</a> |
                        Stir of Echoes</span></span><img src="http://ift.tt/1cLsmZu" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->

Now here is my current code

$(document).ready(function () {

          var desc = false;
    document.getElementById("sort").onclick = function () {
            sortUnorderedList("movie", desc);
            desc = !desc;
            return false;
        }


});
function sortUnorderedList(ul, sortDescending) {

    if (typeof ul == "string")
        var lis = document.getElementsByClassName("movie");


    var vals = [];

    for (var i = 0, l = lis.length; i < l; i++)
        vals.push(lis[i]);
    debugger;
    vals.sort(function (a, b) { return a.title - b.title });
    //vals[].title.sort();

    if (sortDescending)
        vals.reverse();

    for (var i = 0, l = lis.length; i < l; i++)
        lis[i].innerHTML = vals[i].innerHTML;
}

above code is not giving desired result can u suggest better way to do it