I am dynamically generating the input box using jquery and then embedding it into the document. The problem I am having is, although the correct value is being shown in the inspector, the browser shows an invalid value.

To be further clear, here is the image:
![enter image description here](https://i.stack.imgur.com/k9jec.png)

You can see that, in the inspector
`<input name="txtTblAmount" class="num" style="width:70px;" type="text" value="1000" tabindex="29">`

the value is 1000 while that being shown in the browser window is 1500. Can anyone please have a look and tell me, what's the problem here?

P.S: Have tried it in firefox as well. But still the problem is same i.e. different value in the inspector.

Here is the JS code:

```
function addrow(itemName, itemid, godown, godownid, quantity, rate, amount, gstAmount) {

        gstAmount = typeof gstAmount !== 'undefined' ? gstAmount : '0';

        if (typeof dTable1 != 'undefined') {
            // dTable1.fnClearTable();
            //$('#ItemRows').find('a[name="btnDelItem"]').off();
            dTable1.fnDestroy();
            // $('#ItemRows').empty();
        }
        //alert($('#ItemRows tr').length);
        var strRow = '<tr id="row' + ($('#ItemRows tr').length + 1) + '">' +
             '<td class="">' +
            (($('#ItemRows tr').length + 1)) +
              '</td>' +
              '<td class="tdItemName" style="widtd: 250px">' +
               itemName +
             '<input name="hfItemId" style="width:200px;" type="hidden" value="' + itemid + '"/>' +
              '</td>' +
              '<td class="" style="widtd: 200px">' +
                godown +
                '<input name="hfGodownid" style="width:200px;" type="hidden" value="' + godownid + '"/>' +
                 '</td>' +
                 '<td class="" style="widtd: 200px">' +
                 '<input name="txtTblQuantity" style="width:200px;" class="num"  type="text" value="' + quantity + '"/>' +
                  '</td>' +
                   '<td class="" style="widtd: auto">' +
                  '<input name="txtTblRate" style="width:70px;" class="num"   type="text" value="' + rate + '"/>' +
                '</td>' +
                 '<td class="" style="widtd: auto">' +
                  '<input name="txtTblAmount" class="num"  style="width:70px;" type="text" value="' + amount + '"/>' +
                 '</td>' +
                 '<td>' +
                 '<input name="txtTblGstAmount" class="num"  style="width:70px;" type="text" value="' + gstAmount + '"/>' +
                 '</td>' +
                '<td class="ms"><div class="btn-group1"> <a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title=" edit " name="btnDelItem" data-id="' + ($('#ItemRows tr').length + 1) + '"  ><i class="icon-remove"></i></a>  </div></td>' +

                '</tr>';
        console.log(strRow);
        console.log(amount);

        $('#ItemRows').append(strRow);
        //SaveNewParty($("#drpAccId option:selected").text());
        bindGrid();
        //dTable1.fnDraw();
        PopulateTotal();
        // $('#ItemRows').find('a[name="btnDelItem"]').off();
        var insertedRow = $('#ItemRows tr')[$('#ItemRows tr').length - 1];
        $(insertedRow).find('a[name="btnDelItem"]').on('click', function () {
            var row = $(this).parents('tr');
            dTable1.fnDeleteRow(dTable1.fnGetPosition(row[0]));
            $('#ItemRows tr').each(function (index) {
                $(this).find('td:nth(0)').text((index + 1));

            });

            PopulateTotal();

        })
        $('#datatable_Items').css('width', '100%');
        Populate_Events();
    }

```