Ok, I found one (of many) problems, the onchange attribute should have been on the select tag not the option tags, but the ajax call is still not being made. I checked the error console and came up with no errors. I created a test site where you can see it:
Under additional information (profile) you should see a select dropdown called Test Field. And if you select either of the options, another profile field should show up beneath it but it doesn't.
Edit: I now see what the problem is. Preid is not defined. How would I go about this? I have defined preid in my php code as zfield. But with the current code it would always put the next field after the primary field and my profile field id's are random.
I'll explain it better how it works right now. First, the user adds some profile fields and each option has another profile field ID assigned to them (it can be any field). Then in a different option he selects which is the primary field, the one that gets displayed first. For this field I have a different template, but all subsequent fields are rendered through the subfield template (they are only a bit different). Do you think it would be better to user the same template?
There are several problems with this approach which I can't solve:
1. Like I said before, I don't know how to correctly create new profile fields after one another.
2. If the user would change his selection in the first field, the subsequent fields would have to be removed, but I don't know how to pass the information to the function. (maybe add a div id++?)
3. I want the user later to edit the fields on a different page, but I don't know how to correctly select the fields he has saved before in the form.
Maybe someone can suggest a different approach for me to achieve this? This seems to have too many flaws and complications.