Symfony add form fields in frontend

I'm relatively new to Symfony, tried searching for a solution for this problem but wasn't able to find any. I'm trying to get a user (in the front end) add form fields to a form.

I'm making an app where users can post recipes and the user should be able to add ingredient form fields to the form, I know how to do this in plain html & jQuery but I havn't got a clue how I can manage it in Symfony.

This is how I'm currently building forms:

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';
    }
}

This is the result I'd like to see, how can I 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();
    })

})

JSFiddle

http://jsfiddle.net/MBhcF/