Please refer below code.
HTML
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=dtListOtherItems] [id*=btnAdd]').on('click', function () {
var count = parseInt($(this).closest('td').find('[id*=txtOrderQty]').val()) || 0;
$(this).closest('td').find('[id*=txtOrderQty]').val(count + 1);
return false;
})
});
</script>
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:DataList ID="dtListOtherItems" runat="server" ClientIDMode="Static" RepeatDirection="Horizontal"
RepeatColumns="4">
<ItemTemplate>
<asp:Label ID="lblProductName" runat="server" CssClass="control-label" Text='<%#Bind("ProductName") %>'
Width="120px"></asp:Label><br />
<label class="control-label">
S :</label><asp:Label ID="lblQuantity" runat="server" CssClass="control-label" Text='<%#Bind("QtyInHand") %>'></asp:Label><br />
<asp:TextBox ID="txtOrderQty" runat="server" ClientIDMode="Static" CssClass="form-control"
Width="50px" Height="20px"></asp:TextBox>
<asp:Button ID="btnAdd" runat="server" ClientIDMode="Static" Text="" />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("ProductName");
dt.Columns.Add("QtyInHand");
dt.Rows.Add("Mobile", 2);
dt.Rows.Add("Tv",3);
dt.Rows.Add("Ac",4);
dtListOtherItems.DataSource = dt;
dtListOtherItems.DataBind();
}
}
Screenshot
