How to properly organize the loading of the html in a complex form?

There is a complex form with user profile, jquery validation activities, testing scripts when you select certain checkboxes and radio. And at the bottom a button "Add another contact". Press it and loaded another one exactly the same form as the previous stays. By pressing the "save" everything goes to the server and saved.

I used a similar problem so decided:
I did on the Smarty template form_chunk.tpl in which all the html and js. I took him to the page with the download.
When you click on the button "Add another contact person" I send ajax to the server, there connected to Smarty and return the html of this template:
$smarty = new Smarty();
$smarty->assign('some_data', $_POST['some_data']);
$out = $smarty->fetch('form_chunk.tpl');
print json_encode(array('result' => $out));

Working in conjunction: mysql, php, jquery, html5, css3

Now developing the system in conjunction with one developer, and we have, in the course of the discussion, there were questions:
1. competent whether a similar approach?
2. As for your projects, you solve such tasks?
3. How such problems are solved in large projects such as Google, Yandex, VK?
July 2nd 19 at 18:02
1 answer
July 2nd 19 at 18:04
For such problems have already come up with AngularJS and other frameworks.
Also, if you use PHP frameworks, like Symfony, and don't paint your bike like I do, the issue will disappear by itself.
There is a render template (chunk or template) is transparent. Regardless of ajax or a GET request

Find more questions by tags SmartyAJAXHTMLPHPJavaScript