JQuery - Value is undefined for a dynamic element

Question

I have this table :

<table id="fla_inf" width="100%">
<tr>
<th class="tab_header" colspan="6">Flavors and Additives</th>
</tr>
<tr>
    <th class="tab_header_nam">Flavor Brand</th>
    <th class="tab_header_nam">Flavor Name</th>
    <th class="tab_header_nam">Dropper type</th>
    <th class="tab_header_nam">Quantity Unit</th>
    <th class="tab_header_nam">Quantity</th>
    <th class="tab_header_nam">Add/Remove row</th>
</tr>
<tbody>
<tr>
    <td><select id="marque.0" class="marque"></select></td>
    <td><select id="arome.0" class="arome"></select></td>
    <td><select id="dropper.0" class="dropper">
            <option selected="selected" value="type1">type 1</option>
            <option value="type2">type 2-3</option></td>
    <td>
        <select id="qtyunit.0" class="qtyunit">
            <option value="ml">ml</option>
            <option value="drops">drops</option>
            <option selected="selected" value="perc">%</option>
        </select>
    </td>
    <td><input id="quantity.0" class="quantity" type="number"/></td>
    <td><input class="addline" type="image" src="http://spitilab.com/wp-content/uploads/2015/01/add.png"><input class="remline" type="image" src="http://spitilab.com/wp-content/uploads/2015/01/delete.png"></td>
</tr>
</tbody>
</table>

and I have this code :

$(document).on('click', '#calc_btn', function() {

    //set variables
    var $totflav =0;

    //set variable to store content from flavors
    var $content_fla = '<table id="res_fla"><tr><th colspan="5">Falvors and additives</th></tr>';
    $content_fla += '<table id="res_fla"><tr><th>Falvors Brand</th><th>Falvors Name</th><th>Quantity (ml)</th><th>Quantity (drops)</th><th>Flavor %</th></tr>';

    //get quantity of all flavors
    $('#fla_inf > tbody > tr:gt(2)').each(function(i) {
        //i++;

        //set the id of elements
        var $brandid = "marque."+i;
        var $aromeid = "arome."+i;
        var $dropid = "dropper."+i;
        var $unitid = "qtyunit."+i;
        var $qtyid = "quantity."+i;

        //set variables for drops and ml
        var $dropsqty = 0;
        var $mlqty = 0;

        //test if quantity is set 
        if ($("#"+$qtyid).val()) {

            //calculate qty in ml
            if ($("#"+$unitid).text() == "%")  {
                $mlqty = parseFloat($("#total_vol").val()) * parseFloat($("#"+$qtyid).val());
            }
            else if ($("#"+$unitid).text() == "ml") {
                $mlqty = parseFloat($("#"+qtyid).val());
            }
            else  {
                if (("#"+$dropid).text() == "type 1") {
                    $mlqty = parseFloat($("#"+qtyid).val())/30;
                } 
                else {
                    $mlqty = parseFloat($("#"+qtyid).val())/20;
                }
            }

            //calculate qty in drops
            if (("#"+$dropid).text() == "type 1") {
                $dropsqty =  parseFloat($mlqty*30);
            } 
            else {
                $dropsqty =  parseFloat($mlqty*20);
            }

            var $pctfla = parseFloat($("#total_vol").val()) * $mlqty

        }   

        //Add flavor to content
        $content_fla += '<tr>';
        $content_fla += '<td>' + $("#"+$brandid).val() +'</td>';
        $content_fla += '<td>' + $("#"+$aromeid).val() +'</td>';
        $content_fla += '<td>' + $mlqty;
        $content_fla += '<td>' + $dropsqty;
        $content_fla += '<td>' + $pctfla;
        $content_fla += '</tr>';

        $totflav = $totflav + $mlqty;

        $i = $i +1;

    });

When I click on the Calculate button, $("#"+$qtyid).val() is undefined. I don't understand why. Normally it should have a value, I already look if the connector name was correct and looks like ok.

Thanks

Answer 1

you need to like $("[id='quantity.0']")

You need to use attribute selector when id include .(dot) charater,

Because of .(dot) means class selector

EX)

$("#quantity.0") means id = quantity and class = 0 find like follow

<input id="quantity" class="0"/>

$("[id='quantity.0']") means id = quantity.0 find like follow

<input id="quantity.0"/>

My Fiddle