reorder DIVs after removing a single Div

Question

how do i reorder dynamic div when i remove one div?. please help. below are my code.

 

aspx.cs

 

if (sc.HasRows)
{
while (sc.Read())
{
var menuID = sc["menuID"].ToString();
var menuDesc = sc["menuDesc"].ToString();

stringBuilder.Append("<div class=gridHome>");

stringBuilder.Append("<div class=grid1Home>");

stringBuilder.Append("<div id=module class=module>" + sc["menuDesc"].ToString() + "<img src=/Image/remove.png class='btnHide' style='float:right'>" + "</div>");

using (SqlConnection conn = ClassConn.GetPortalCon())
{
SqlCommand cmd1 = new SqlCommand("ret_Menu_SubMenu", conn);
cmd1.CommandType = CommandType.StoredProcedure;
cmd1.Parameters.AddWithValue("@userID", nopkj);
cmd1.Parameters.AddWithValue("@systemID", systemID);
cmd1.Parameters.AddWithValue("@menuID", menuID);
SqlDataReader sc1 = cmd1.ExecuteReader();


if (sc1.HasRows)
{
while (sc1.Read())
{
// komen dulu new tab
var newTab = sc1["new_tab"].ToString();
var subMenuID = sc1["MenuIDsub"].ToString();
var subMenuDesc = sc1["subMenuDesc_bi"].ToString();

if (newTab == "1")
{
stringBuilder.AppendFormat("<div id=menu class=menu>" + "<a target='_blank' href=" + sc1["subMenuPath"].ToString() + ">" + sc1["subMenuDesc_bi"].ToString() + "</a></div>");
}
else

{
stringBuilder.AppendFormat("<div id=menu class=menu>" + "<a href=" + sc1["subMenuPath"].ToString() + "?TreeText=" + Server.UrlEncode(subMenuDesc) + ">" + sc1["subMenuDesc_bi"].ToString() + "</a></div>");
}
}
stringBuilder.Append("</div>");
stringBuilder.Append("</div>");
stringBuilder.Append("</div>");
  }
}

if (stringBuilder.Length > 0)
{
columnsContainerHome.Controls.Add(new Literal { Text = stringBuilder.ToString() });

columnsContainerHome.Visible = true;
}
} 

 

my jquery code:

 

<script>
$(document).ready(function () {
var idCount =1;
$('.grid1Home').each(function () {
$(this).attr("id", idCount);
idCount++;
// alert("divID" + this.id)
})

//var Count = 1;
// $('.txtNumber').each(function () {
// $(this).val(Count);
// $(this).css('display', 'none');
// Count++;
// })

var btnCount = 1;
$('.btnHide').each(function () {
$(this).attr("id", btnCount);
btnCount++;
})

$(".btnHide").click(function () {
var id = $(this).attr("id");
alert("btnID" + this.id)
$('div#' + id).remove();
$(this).remove();
})
});</script> 

 

html code:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="columnsContainerHome" class="columnsContainerHome" runat="server" >
</div>
</asp:Content>