Sorting Columns of Adoptables

[!Alive]

So I am working on having several columns of adoptables shown on the myadopts page instead of just one. And have them be sortable. I have successfully installed the sortable mod. It worked fine with the single row of adoptables. But when I implemented the columns the sorting quit working. I have scanned over the code and believe that the problem stems from having a table inside of the sorting table. Though I haven't the slightest how to go about changing what I have to make it work the way I want. I've tried a few things but they only result in one or the other of the two things(columns and sortablitiy) actually working.

With the below code the columns work but the sorting doesn't.
Here is the code:

PHP Code:

$article_content = "<p id='activate_sort' style='cursor: pointer'>
        <img src='templates/icons/movepkmbtn.png' />
                                 
                            </p>
                            <table>
                                <tr>
                                    <strong>Your Pokemon</strong></br></br>
                                </tr>
                            </table>
                            <table id='sortable_adoptables'>"; 
        
        
                    
        $query = "    SELECT * 
                    FROM {$prefix}owned_adoptables 
                    LEFT JOIN {$prefix}sort_adoptables 
                        ON {$prefix}owned_adoptables.aid = {$prefix}sort_adoptables.adoptable_id
                    INNER JOIN {$prefix}levels 
                        ON {$prefix}levels.thisislevel = {$prefix}owned_adoptables.currentlevel
                    INNER JOIN {$prefix}adoptables
                        ON {$prefix}owned_adoptables.type = {$prefix}adoptables.type
                    WHERE {$prefix}owned_adoptables.owner = '{$loggedinname}' 
                    AND {$prefix}levels.adoptiename = {$prefix}adoptables.type
                    ORDER BY {$prefix}sort_adoptables.sorting_id";  
                                                        
        $result = runquery($query);
        
        $cols = 3;

        do{
        $article_content .= "<tr>";
        for($i=1;$i<=$cols;$i++){  // All the rows will have $cols columns even if the records are less than $cols
        
        $row = mysql_fetch_array($result);
        if($row) 
        {
            if($row['usealternates'] =='yes')
            { 
                $image = $row['alternateimage']; 
            }
            else
            { 
                $image = $row['primaryimage']; 
            }
            if($row['currentlevel'] == 0)
            { 
                $image = $row['eggimage']; 
            }
            if($image=='')
            { 
                $image = $row['primaryimage']; 
            }
            $article_content .= "
                        <td>
                        <table><tr id='orderaid_{$row['aid']}'>
                                <td><a href='myadopts.php?act=manage&id={$row['aid']}'><img src='{$image}'></a></td>
                                <td><strong>{$row['name']}</strong> the {$row['type']} Pokemon</br>
                                    Gender:<img src='picuploads/{$row['gender']}.png'></br>
                                    Nature:{$row['temperment']}</br>
                                    OT:{$row['ot']}</br>
                                    EXP:{$row['totalclicks']}</br></td>
                                <td width=50%>&nbsp;</td>    <!-- Create gap between columns -->
                            </tr></table></td>";
                                
        }
        
        else{
            $article_content .= "<td>&nbsp;</td>";    //If there are no more records at the end, add a blank column
            }
        }
    } while($row);
        $article_content .= "</table>";
        
        
    } 


Thanks in advance for any help. <3