Symfony adds form fields to frontend

Question

Symfony adds form fields to frontend

I'm relatively new to Symfony, tried to find a solution to this problem, but could not find it. I am trying to get the user (in the interface) to add form fields to the form.

I am creating an application in which users can publish recipes, and the user should be able to add the form fields of the ingredients to the form, I know how to do this in simple html and jQuery, but I did not know how I can manage it in Symfony.

This is how I create forms now:

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('username', 'text');
        $builder->add('email', 'email');
        $builder->add('password', 'repeated', array(
           'first_name'  => 'password',
           'second_name' => 'confirm',
           'type'        => 'password',
        ));
        $builder->add('address', new AddressType());
        $builder->add('Registreer', 'submit');
    }

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'Acme\DemoBundle\Entity\User'
        ));
    }

    public function getName()
    {
        return 'user';
    }
}

Is this the result that I would like to see how I can achieve something like this in Symfony?

HTML

<a href="#" id="add">Add ingredient</a>
<form>
    <p><input type="text" name="ingredient[]" /></p>
</form>

JQuery

$(function(){

    console.log('ready')

    $('#add').click(function(){
        $('form').append('<p><input type="text" name="ingredient[]" /><a href="#" class="remove">Remove</a></p>');
    })

    $('form').on('click', '.remove', function(){
        $(this).parent().remove();
    })

})