Append dynamically built form element to my form

Question

I have used jquery/javascript to dynamically build the form elements that I want. These include text and select fields. I would now like to append these elements to my form. Below is what I have tried.

Form:

<form id='associates' method="post">
<table border="1" id='mytable' ><tr>
<input type="hidden" name="_token" id="_token" value="<?php echo  csrf_token(); ?>">
<input type="hidden" name="rowIDcount" id="rowIDcount" >
<input type="reset" value="Reset" onClick="window.location.reload()">
<input type="submit" value="Submit">
</form></div>

Javascript:

var name="<input id='name"+x+"' readonly value='"+array3[i]['Assoc_Name']+"'>";
var form=document.getElementById('associates');
  form.appendChild(name);

There is obviously more javascript/jquery to build the name variable but that does not need posted.

How can I append name to my form?

Answer 1

Firstly, you need valid HTML, without unclosed tables and rows.

Secondly, you can't pass a string to appendChild .

As you've stated you're using jQuery, it should be straight forward

$('<input />', {
    name     : 'name' + x,
    readOnly : 'readonly',
    value    : array3[i]['Assoc_Name']
}).appendTo('#associates');