Populate fields by javascript using MYSQL

[dreadrocksean]

Hi folks.
I have an html form button that runs a javascript function that in turn creates a row of fields on the same form as the button.
When this form is submitted, each row of fields is stored as a separate record in a mysql database on the server. Each of these records is stamped with the customer id of the logged in user. This works fine.
However, I would like to auto create these fields and populate them with the records that match a logged in user's customer id.
I have php code that retrieves the data just fine.
My problem is, how do I go about populating these rows of fields since they are dynamically produced from a javascript function? In other words, how do I get the data retrieved by my php queries INTO the javascript function that creates these fields in order to assign the values?

Here are the code snippets:

        <tr>
          <td align="center"><div id="readroot" style="display: none">
			<input type="button" value="Remove Item"
				onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
            <input type="hidden" name="id" value="-1"/>
            <input name="field1" onFocus="this.value='';" onclick="this.value='';" value="1" size="3" maxlength="3" id="field1" />
            <input name="field2" onFocus="this.value='';" onclick="this.value='';" value="" size="20" maxlength="20" id="field2" />
            <input name="field3" onFocus="this.value='';" onclick="this.value='';" value="field3" size="20" maxlength="20" id="field3" />
            <input name="field4" onFocus="this.value='';" onclick="this.value='';" value="field4" size="10" maxlength="10" id="field4" />
            <input name="field5" id="field5" type="checkbox" value="1" checked />
            <!-- end #readroot -->
            </div>
            <span id="writeroot"></span>
            <input type="button" name="btnMoreFields" id="btnMoreFields" onclick="moreFields('perm', '1');" value="Add List Item" />
            <input type="submit" value="List" />
            <input type="button" name="btnPrevList" id="btnPrevList" onclick="prevList();" value="Show Prev List" />
            <input type="hidden" name="redirect" value="redirect_address" />
            <input type="hidden" name="form_order" value="default"/>
            <input type="hidden" name="form_delivery" value="default"/>
            <input type="hidden" name="form_format" value="html"/></td>
        </tr>

<script type="text/javascript">
var counter = 0;

function moreFields() {
	counter++;
	var newFields = document.getElementById('readroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if (theName) {
			newField[i].name = theName + counter;
			newField[i].value = newField[i].name;
		}
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
	pageScroll();
}
</script>