Sort divs using jQuery based on child elements content

I'm trying to sort n amount of divs in my page based on the content inside other elements in the div.

Here is what my html code looks like for one div block (in one page there are several like this that I need to re-order / sort by price or alphabetically.

<div class="productBoxWrapper">
<li>
    <img src="my-product-image.jpg"></a>
    <div class="product-info">
        <h4>
            <!-- I need to sort all divs by the Product Name -->
            <a class="productTitleForSorting" href="product-page-link">Product Name</a><br>
        </h4>
        <div class="product-price">
            <span id="listPrice">Suggested Retail: $XX.XX</span>
            <span id="lowestPrice">As Low As:
                            <!-- I need to sort all divs by Product Price -->
            <span class="productPriceForSorting">$XX.XX</span></span>
        </div>
                   </div>               
    </li>
</div>

I'm using this jQuery plugin http://net.tutsplus.com/tutorials/javascript-ajax/sorting-values-with-javascript/ , jquery.datasource. The examples of the plugin work, but I can't get this to work for my site.

Here is the javascript that's triggered when user selects sorting option (Price, Alpha) from a dropdown list. It does do some random sorting sometimes, but does not work properly. I'm afraid I'm not calling the right div here or something ... I'm new to jQuery so any help greatly appreciated. PLEASE SEE PLUGIN PAGE FOR USAGE

change: function () {

var selectedOptionValue = jQuery('#sortThisCollectionBaby option:selected').val();

if (selectedOptionValue == 'price-low-to-high')
{        
        // sort collection by price - low to high 
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);

        jQuery('.productBoxWrapper').datasort({
            datatype: 'alpha',
            sortElement: '.productPriceForSorting',
            reverse: false
        });   
        jQuery('.productBoxWrapper').fadeTo("fast", 1);
}    

if (selectedOptionValue == 'price-high-to-low')
{
        // sort collection by price - high to low
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);        
        jQuery('.productBoxWrapper').datasort({
            datatype: 'alpha',
            sortElement: jQuery('.productPriceForSorting'),
            reverse: true
        });      
        jQuery('.productBoxWrapper').fadeTo("fast", 1);  
}    

if (selectedOptionValue == 'alphabetically-a-to-z')
{
        // sort collection alphabetically a to z        
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);        
        jQuery('#productTitleForSorting').datasort({
            datatype: 'alpha',
            sortElement: '.productTitleForSorting',
            reverse: false                
      });          
      jQuery('.productBoxWrapper').fadeTo("fast", 1);
}

if (selectedOptionValue == 'alphabetically-z-to-a')
{
        // sort collection alphabetically z to a
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);        
        jQuery('.productBoxWrapper').datas开发者_高级运维ort({
            datatype: 'alpha',
            sortElement: '.productTitleForSorting',
            reverse: false
        });
        jQuery('.productBoxWrapper').fadeTo("fast", 1);
   }
}

Something that looks wrong is jQuery('.productBoxWrapper'). Shouldn't you be sorting the li's, so it should be jQuery('.productBoxWrapper li').