JQuery .append() adds invisible elements, visible text

Question

I am using JQuery to add form elements when a button is pressed. The problem is that I can't get the elements to render. Just the text "-- start typing name --" is rendered. When I right click and inspect element I see all the jquery rendered elements. There is no styling to keep the newly added elements from being view-able. No console errors.

This is a snippet from my .js file it should insert form elements

$(document).ready(function() {


    var orgPosition = 0;
    $("#addOrgButton").click(function() {
        orgPosition++;

        $('#orgs').append('<br><div class="field_container"><form:label path="org_id"><spring:message code="label.org_id" /></form:label><form:select id="org_id" class="selectorg" path="jobOrgs[' + orgPosition + '].org_id"><form:option value="0">-- Start typing name --</form:option><form:options items="${organizationsList}" itemLabel="organization" itemValue="org_id" /></form:select></div>');
    });

from my jsp...

<form:form id="formid" method="post" action="addJob.html" commandName="jobModel">
    <div id="orgs">
        <div class="field_container">
            <form:label path="full_name">
                <spring:message code="label.jobFullName" />
            </form:label>
            <form:input class="input" path="full_name" />
            <form:errors path="full_name" cssClass="job_error" />
        </div>
        <br>
        <div class="field_container">
            <form:label path="abbreviation">
                <spring:message code="label.abbreviation" />
            </form:label>
            <form:input path="abbreviation" />
        </div>
        <br>
        <div class="field_container">
            <form:label path="org_id">
                <spring:message code="label.org_id" />
            </form:label>
            <spring:bind path="jobOrgs[0].org_id">
                <form:select id="org_id" class="selectorg" path="${status.expression}">
                    <form:option value="0">-- Start typing name --</form:option>
                    <form:options items="${organizationsList}" itemLabel="organization" itemValue="org_id" /></form:select>
            </spring:bind>
        </div>
    </div>
    <input type="button" id="addOrgButton" value="Add" />
    <br>
</form:form>

This is a screenshot of the page with relevent elements after clicking "Add." As you can see there are elements on the page but they are invisible. I should have two "Organization" drop down lists.

Answer 1

There is a very helpful article here... jquery clone form fields and increment id

So the answer is to use clone() and use a regular expression to increment your index. Details and an example are given at above link. Appending a Spring form element will not work as the append is happening browser side and spring form elements are compiled server side. Browsers know nothing of Spring elements.