when the datalist is empty,item is not getting addedon clic

Question

i m displaying 4 items in my datalist-dlproducts,when the button-btnaddtocart is clicked,i want data to be added to datalist-dlmycart....

the problem is when i keep dlmycart empty and click btnaddtocart,no item is added to dlmycart...but when i display one item in dlmycart on pageload and 

click btnaddtocart, it adds the repective item to dlmycart.....

here's my code....

 

function Addtocart(pid) {

var productid = pid;

$.ajax({

url: "Addtocart.asmx/Addproducttocart",

contentType: 'application/json;charset=utf-8',//required if the web service returns xml and u want json...

data: JSON.stringify({ pid: productid }),

method: "post",

dataType: "json",

success: OnSuccess,

error: function (err) {

alert(err);

}

});

}

function OnSuccess(response) {

var JqueryXml = response.d;

var dlmycart = $('#dlmycart');

var row = dlmycart.find('tr').eq(0).clone(true);

$(".name1", row).eq(0).html(JqueryXml.Name);

$(".productId1", row).eq(0).html(JqueryXml.ProductId);

$(".description1", row).eq(0).html(JqueryXml.Description);

$(".imageUrl1", row).eq(0).html(JqueryXml.ImageUrl);

$(".image1", row).eq(0).attr("src", 'Images/' + JqueryXml.ImageUrl);

$(".price1", row).eq(0).html(JqueryXml.Price);

$(".quantity1", row).eq(0).html(JqueryXml.Quantity);

$(".lblid", row).eq(0).html(JqueryXml.ProductId);

$(".btnremovefromcart", row).eq(0).attr("data-pid",JqueryXml.ProductId);

dlmycart.append(row);

}

 

my datalist....

<div>

<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="4"

RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0" BackColor="Aqua"

Width="100%">

<ItemStyle Width="25%" />

<ItemTemplate>

<table border="0" style="width: 100%; height: 300px; border: 2px solid Blue; background-color: Green; text-align: center">

<tr>

<td>

<b><u><span class="name">

<%# Eval("Name") %></span></u></b>

</td>

</tr>

<tr>

<td>

<b>Productid: </b><span class="productId" style="font-size: 20px; color: Yellow; font-weight: 500;">

<%# Eval("Productid") %></span><br />

<b>Description </b><span class="description">

<%# Eval("Description") %></span><br />

<b>ImageUrl: </b><span class="imageUrl">

<%# Eval("ImageUrl")%></span><br />

<img class="image" alt='' src="Images/<%# Eval("ImageUrl")%>" width="160px" height="320px" /><br />

<b>Price: </b><span class="price">

<%# Eval("Price")%></span>

<img alt="" src="star-icon.png" />

<b>Quantity: </b><span class="quantity">

<%# Eval("Quantity")%></span><br />

<input id="btnaddtocart" type="button" value="Add To Cart" data-pid='<%#Eval("ProductId") %>' onclick='Addtocart(this.getAttribute("data-pid"));' />

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

<asp:DataList ID="dlmycart" runat="server" RepeatLayout="Table" RepeatColumns="1"

RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0" BackColor="Aqua"

Width="100%">

<ItemStyle Width="80%" BackColor="Violet" />

<ItemTemplate>

<table border="0" style="width: 100%; height: 300px; border: 2px solid Blue; background-color: ; text-align: center">

<tr>

<td>

<b><u><span class="name1">

<%# Eval("Name") %></span></u></b>

</td>

</tr>

<tr>

<td>

<b>Productid: </b><span class="productId1" style="font-size: 20px; color: Yellow; font-weight: 500;">

<%# Eval("Productid") %></span><br />

<b>Description </b><span class="description1">

<%# Eval("Description") %></span><br />

<b>ImageUrl: </b><span class="imageUrl1">

<%# Eval("ImageUrl")%></span><br />

<img class="image1" alt='' src="Images/<%# Eval("ImageUrl")%>" width="160px" height="320px" /><br />

<b>Price: </b><span class="price1">

<%# Eval("Price")%></span>

<img alt="" src="star-icon.png" />

<b>Quantity: </b><span class="quantity1">

<%# Eval("Quantity")%></span><br />

<span class="lblid"><%#Eval("ProductId") %></span>

<input id="btnremovefromcart" class="btnremovefromcart" type="button" value="Remove From Cart" data-pid='<%#Eval("ProductId") %>' onclick='Removefromcart(this.getAttribute("data-pid"));' />

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</div>