Node js not recognizing input fields that were added dynamically to the form

Question

I saw a similar question but did not know how to apply it to node js. I created a cart, a user clicks to add an item and that item is added to the form using jquery. On submit however, the only form field acknowledge is the totalCost which was not dynamically added.

My pug file (the relevant portion):

h1#spendable 50000
table
    form#cartitems(method='POST' action='/store')
        tbody
            tr#buyit(style='border-bottom:0px solid white; height:50px; display:none;')
                td#purchCost <b> Total: </b>
                    input#costcost.minIn.nolineinput(name='totalCost' type='text' readonly)

            tr 
                td(colspan=2)
                    button(type='submit' style='width:100%; padding:5px 0px;') Buy

My javascript file looks like this:

function addToCart(butt){
var $spendable = $('#spendable');

var balance  = Number( $spendable.text() );
var itmCost  = Number($(butt).prev().prev().text());
var boughtItems = $('.firstline').length;
if(balance > itmCost && boughtItems < 4){
    var imgSrc   = $(butt).parent().prev().attr('src');
    var specific = $(butt).prev().val();
    var specificL= $(butt).prev().text();
    var itmName  = $(butt).prev().prev().prev().text();
    var itmType  = $(butt).parent().parent().parent().prop('id');
    var purchCost= Number( $('#purchCost .minIn').val() );

    //create a demo
    if (itmType == 'Treat' || itmType == 'Prize'){
        alert(itmType);
        $('#cartcontainer table tbody').prepend("<tr class='firstline'><td class='smtd' rowspan=2 ><img class='demo' src='" + imgSrc + "'></img></td><td><input type='text' class='nolineinput' name='itmName' value='" + specific +"|" + itmName + "' readonly></input></td><tr><td><div class='minidiv'><p>" + Number(itmCost) + "</p></div><div class='microdiv'><input id='chck' type = 'checkbox' name = 'itmKind' onclick='remove(this)'  checked></input></div></td></tr>")

        if(boughtItems ==0){
            $('#buyit').show()
        }
    }else{
        $('#cartcontainer table tbody').prepend("<tr class='firstline'><td class='smtd' rowspan=2 ><img class='demo' src='" + imgSrc + "'></img></td><td><input type='text' class='nolineinput' name='itmName' value='" + itmName +"| " + specificL + "' readonly></input></td><tr><td><div class='minidiv'><p>" + Number(itmCost) + "</p></div><div class='microdiv'><input class='chck' type = 'checkbox' name = 'itmKind' value='" + itmCost + "' onclick='remove(this)' checked></input></div></td></tr>");


        if(boughtItems ==0){
            $('#buyit').show()
        }
    }
    var total= purchCost + itmCost;
    $('#purchCost .minIn').val(total);
    $spendable.text( balance-itmCost);
}else if (boughtItems >= 4){
    alert("You've reached the max amount of item\n you can purchase. Buy more next week!")
}else {
    alert('Sorry you do not have enough\n points to purchase this item.')
}

}

Also I should mention I'm using body-parser and when i console.log( req.body) the only thing i get back is {totalCost:'1500'} but what I wish to see is: {itmName:'Caprisun', itmKind:'Cherry', totalCost:'1500'}

Answer 1

Nevermind solved it on my own. The table should have been created inside the form. Table, tbody , tr, td should've all been together like so:

    form
         table
              tbody
                   tr
                     td Total
                     td
                        input(type='text' name='itemName')