How to get/access row value from Repeater using jquery?

Question

i've a jquery function for my textbox onchange event. when triggers, i want to validate the value inputted by the user in the textbox with the value from the datatable displayed by repeater. i was able to get the value of the textbox but my problem is i cant get the value (qty column) from the repeater. i put on an itemindex for the id of the row to identify the right row and get the value of column qty. in debugging mode, the variable that i used is unidentified so im not getting any value at all. I need help please, i've been struggling for this too long now.

html

<asp:Repeater ID="rptInStock" runat="server">
            <ItemTemplate>
                <div id="ucprodres-in-stock<%# Container.ItemIndex%>>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="ucprodres-stock availability">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Availability").ToString%>
                    </div>
                    <div class="ucprodres-stock unit-price">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRange").ToString%>
                    </div>
                    <div class="ucprodres-stock dollar">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRangePrice").ToString%>
                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">
                        <asp:TextBox ID="tbxInStock" runat="server"></asp:TextBox>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

jquery: (+itemIndex is not working also, how do i add index to the id since i used container.itemIndex to make my ids unique?)

function ValidateQty1(txtBox) {
    var qtyreqd = txtBox.value;
    var instockrow = document.getElementById("ucprodres-in-stock" + itemIndex);
    var qtyavail = instockrow.childNodes[1].nodeValue;
    if (qtyreqd > qtyavail) {
        alert("The required quantity should not be greater than the available quantity");
}

sample generated html

<div id="ucprodres-in-stock">

                <div id="ucprodres-in-stock0>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        FAIRCHILD SEMICONDUCTOR C
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        2
                    </div>
                    <div class="ucprodres-stock availability">
                        In Stock
                    </div>
                    <div class="ucprodres-stock unit-price">

                    </div>
                    <div class="ucprodres-stock dollar">

                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">

                        <input name="MasterBasic$MasterPageContent$ucProductHeader$ucProductResults$rptInStock$ctl00$tbxInStock" type="text" id="MasterPageContent_ucProductHeader_ucProductResults_rptInStock_tbxInStock_0" onchange="ValidateQty1(this);" onkeypress="return validate(event);" />
                    </div>
                </div>

                <div id="ucprodres-in-stock1>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        Fairchild Semiconductor Corp
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        6
                    </div>
                    <div class="ucprodres-stock availability">
                        In Stock
                    </div>
                    <div class="ucprodres-stock unit-price">

                    </div>
                    <div class="ucprodres-stock dollar">

                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">

                        <input name="MasterBasic$MasterPageContent$ucProductHeader$ucProductResults$rptInStock$ctl01$tbxInStock" type="text" id="MasterPageContent_ucProductHeader_ucProductResults_rptInStock_tbxInStock_1" onchange="ValidateQty1(this);" onkeypress="return validate(event);" />
                    </div>
                </div>

Here's a sample output to better understand my scenario: when onchange triggered, i want to get the value in qty-avail where the txtbox was changed.

UPDATES: Jquery Function:

function ValidateQty1(txtBox) {
    var qtyreqd = txtBox.value;
    var qtyavail = $(this).parent().siblings(".qty-avail").text().trim();
    alert(qtyavail);
}

HTML:

<asp:Repeater ID="rptInStock" runat="server">
            <ItemTemplate>
                <div id="ucprodres-in-stock<%# Container.ItemIndex%>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="ucprodres-stock availability">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Availability").ToString%>
                    </div>
                    <div class="ucprodres-stock unit-price">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRange").ToString%>
                    </div>
                    <div class="ucprodres-stock dollar">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRangePrice").ToString%>
                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">
                        <input type="text" onkeypress="return validate(event);" onchange="ValidateQty1(this);"  />
                        <%--<asp:TextBox ID="tbxInStock" runat="server"></asp:TextBox>--%>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

Answer 1

You can use nth-of-type with JQuery to find an item by index, something similar to:

<script>
var foundEl = $( "#ucprodres-in-stock > div:nth-of-type(2)" );
</script>

Here is the link to the documentation:

http://api.jquery.com/nth-of-type-selector/

For example:

<form>
<fieldset>
     <section id="demo">
            <!-- some code-->
     </section>
     <section id="test">
            <!-- some code-->
     </section>
     <section id="hello">
            <!-- some code-->
     </section>
  </fieldset>
 </form>

This will print "test" in the console:

var el =$("form>fieldset>section:nth-child(2)");
console.log(el.attr("id"));

Update 1:

Based on your resent update here is how I would do it, I would search for the parent siblings with the class .qty-avail, something like:

$("input").on('change',function(){
    var t = $(this).parent().siblings(".qty-avail").text().trim();
    alert(t);
});

http://jsfiddle.net/X5Q4H/1 or as it is in your code sample:

http://jsfiddle.net/X5Q4H/2/

Answer 2

The id's of the divs you're trying to select have a rogue > character in them.

id="ucprodres-in-stock0>"

Also what you have here is pure JavaScript. There is no jQuery usage.