Jquery not appending values correctly

Question

I have a fixed set of input fields on page load. I have checkboxes with values displayed and when someone checks the checkbox the values are added to the input field. If all the input fields are filled, a new one is created. My problem is that, the checkbox values are inserted correctly in existing input fields and if the value exceeds,a new input field is created but values are not inserted immediately when the input field is created.Only on the next click is the values inserted in the newly created input field. Here's the code

<script>
    function fillin(entire,name,id,key) {
        if (entire.checked == true) {
            var split_info = new Array();
            split_info = name.split(":"); 
            var div = $("#Inputfields"+id);
            var till = (div.children("input").length)/4;
            var current_count = 0;
            for (var j=0;j<till;j++) {
                if (document.getElementById("insertname_"+j+"_"+id).value == "" && document.getElementById("insertnumber_"+j+"_"+id).value == "") {
                    document.getElementById("insertname_"+j+"_"+id).value = split_info[0];
                    document.getElementById("insertnumber_"+j+"_"+id).value = split_info[1];
                    break;
                } else
                    current_count = current_count+1;
                if (current_count == till) {
                    var x= addnew(id);
                    x =x+1;
                    $("#Inputfields"+id).find("#insertname_"+x+"_"+id).value = split_info[0];
                    alert($("#Inputfields"+id).find("#insertname_"+x+"_"+id).value);
                    document.getElementById("insertname_"+x+"_"+id).text = split_info[0];
                    //alert(document.getElementById("insertname_"+x+"_"+id).value);
                    //document.getElementById("insertnumber_"+x+"_"+id).value = split_info[1];
                }
            }
        } else {
        }
    }
</script>

<script>
function addnew(n) {
    //var id = $(this).attr("id");
    var div = $("#Inputfields"+n);
    var howManyInputs = (div.children("input").length)/4;
    alert(howManyInputs);
    var val = $("div").data("addedCount");

    var a = '<input type="search" id="insertinstitute_'+(howManyInputs)+'_'+n+'" placeholder="Institute" class="span3">';
    var b =  '<input type="search" id="insertname_'+(howManyInputs)+'_'+n+'" placeholder="name" class="span3">';
    var c =  '<input type="search" name="" id="insertnumber_'+(howManyInputs)+'_'+n+'" placeholder="number" class="span3">';
    var d =  '<input type="search" name="" id="insertarea_'+(howManyInputs)+'_'+n+'" placeholder="area" class="span3">';
    var fin = a+b+d+c;
    $(fin).appendTo(div);
    div.data("addedCount", div.data("addedCount") + 1);
    return howManyInputs;
}
</script>

UPDATED: Thank you all. I was able to find the bug. The culprit was x =x+1;. It should have been x

Answer 1

I have reworked a lot of your code for a lot of reasons. Compare the two.

function fillin(entire, name, id, key) {
    if (entire.checked) {
        var split_info = [];
        split_info = name.split(":");
        var div = $("#Inputfields" + id);
        var till = (div.children("input").length) / 4;
        var current_count = 0;
        var j = 0;
        for (j = 0; j < till; j++) {
            var myj = j + "_" + id;
            if ($("#insertname_" + myj).val() === "" && $("#insertnumber_" + myj).val() === "") {
                $("#insertname_" + myj).val(split_info[0]);
                $("#insertnumber_" + myj).val(split_info[1]);
                break;
            } else {
                current_count = current_count + 1;
            }
            if (current_count === till) {
                var x = addnew(id) + 1;
                div.find("#insertname_" + x + "_" + id).val(split_info[0]);
                alert(div.find("#insertname_" + x + "_" + id).val());
                $("#insertname_" + x + "_" + id).val(split_info[0]);
            }
        }
    }
}

function addnew(n) {
    var div = $("#Inputfields" + n);
    var howManyInputs = (div.children("input").length) / 4;
    alert(howManyInputs);
    var myi = (howManyInputs) + '_' + n + '"';
    var val = div.data("addedCount");

    var a = '<input type="search" id="insertinstitute_' + myi + ' placeholder="Institute" class="span3">';
    var b = '<input type="search" id="insertname_' + myi + '  placeholder="name" class="span3">';
    var c = '<input type="search" name="" id="insertnumber_' + myi + ' placeholder="number" class="span3">';
    var d = '<input type="search" name="" id="insertarea_' + myi + '  placeholder="area" class="span3">';
    var fin = a + b + d + c;
    $(fin).appendTo(div);
    div.data("addedCount", val + 1);
    return howManyInputs;
}

Answer 2

The problem is probably here:

document.getElementById("insertname_"+x+"_"+id).text

There's no text property in elements. There's textContent (not in IE8-), innerText (in IE) and innerHTML. There's the text method in jQuery, though. So you can either do:

document.getElementById("insertname_"+x+"_"+id).innerHTML = ...

or

$("#insertname_"+x+"_"+id).text(...);

Also, these lines:

$("#Inputfields"+id).find("#insertname_"+x+"_"+id).value = split_info[0];
alert($("#Inputfields"+id).find("#insertname_"+x+"_"+id).value);

.value there should be replaced with .val(), because those are jQuery objects.