Retaining elements while using .replaceWith()

Retaining elements while using .replaceWith()

I've struggled with this so any help is welcome. I have created a toggle
between a grid(divs) and a table using the jquery replaceWith function.
This works great, but my issue lies with keeping each element's specific
link constant through each click.
In the attached example, I've added the item to the replaceWith function,
but it renders outside the desired elements. For example, I want the link
to remain in the TR or Div it initially resides in. When it renders, the
links render outside the Table/Div elements.
Example:
<table class="toggle" style="display: table;">
<tbody>
<tr class="table-head"> <--- LINK SHOULD BE HERE --->
<th>Title</th><th>Date</th><th>Info</th></tr><tr><td>Class
Title</td><td>Item Details</td><td>Item Details</td></tr>
</tbody>
</table>
Hopefully I've described this well enough for someone to answer.
http://jsfiddle.net/rymill2/R3J5m/
JS: $btnTable = ".button-table"; $btnGrid = ".button-grid"; $table =
"table.toggle"; $grid = ".grid"; $link = "a.grid-link";
if ($($table).length > 0) {
$($btnTable).addClass('active');
} else {
$($btnTable).removeClass('active');
}
if ($($grid).length > 0) {
$($btnGrid).addClass('active');
} else {
$($btnGrid).removeClass('active');
}
$($btnTable).click(function() {
$(this).addClass('active');
$($btnGrid).removeClass('active');
$($grid).replaceWith(function() {
var html = '';
$('div:first', this).each(function() {
html += '<tr class="table-head">';
$('div', this).each(function() {
html += '<th>' + $(this).html() + '</th>';
});
html += '</tr>';
});
$('div:not(:first)', this).each(function() {
var innerHtml = '';
var innerLink = '';
$($link, this).each(function() {
var href = $(this).attr('href');
var id = $(this).attr('id');
innerLink += '<a class="grid-link" href="'+ href +'" id="'+ id
+'"></a>';
});
$('div', this).each(function() {
innerHtml += '<td>' + $(this).html() + '</td>';
});
if (innerHtml != '') {
html += '<tr>'+ innerLink + innerHtml +'</tr>';
}
});
return $('<table class="toggle">' + html + '</table>').fadeIn();
});
});
$($btnGrid).click(function() {
$(this).addClass('active');
$($btnTable).removeClass('active');
$($table).replaceWith(function() {
var html = '';
$('tr', this).each(function() {
html += '<div class="result three columns h-100">';
$('th', this).each(function() {
html += '<div>' + $(this).html() + '</div>';
});
$('td:first', this).each(function() {
html += '<div class="grid-title">' + $(this).html() + '</div>';
});
$('td:not(:first)', this).each(function() {
html += '<div class="grid-row">' + $(this).html() + '</div>';
});
html += '</div>';
$($link, this).each(function() {
var href = $(this).attr('href');
var id = $(this).attr('id');
html += '<a class="grid-link" href="'+ href +'" id="'+ id
+'"></a>';
});
});
return $('<div class="grid">' + html + '</div>').fadeIn();
});
});