Javascript Selector with .Ajax() / childNodes

Question

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span id="uid">021454</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span id="uid">012447</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span id="uid">0127841</span>
        <span id="qty">1</span>
    </li><br>
</ul>

js script

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $(????).text(),
            productType: $(????).text(),
            productQty: $(???).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});

How can i get the entire li content (pname,uid,qty) from the selected li and pass it by .ajax()

heres what im trying to do:

li content --> get all info(pname,uid,qty) --> put to data of ajax --> pass to phpPage.php --> return result

Answer 1

Repeating ids are invalid in html, I would suggest using a class instead of an id, then select the descendants of the li with the specific class

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span class="uid">021454</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span class="uid">012447</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span class="uid">0127841</span>
        <span class="qty">1</span>
    </li><br>
</ul>

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $('.uid',this).text(),
            productType: $('.pname',this).text(),
            productQty: $('.qty',this).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});