2. $(document).ready(function() {
3. $('#trigger').click(function(){
4. $('this').removeAttr("id")
5. .append('<input id="trigger" class="hidden" type="text" placeholder="Add another answer..." />')
6. .animate({opacity: 1,},200, function() {
7. $("#trigger").animate({opacity: 0.7,},1000);
8. });
10. });
11. });

It's supposed to make it so that when a user clicks on a text input box with the id "trigger" another text box appears beneath it with 0.7 transparency. The clicked on text box loses the "trigger" id, which is given to the newly created text box. 

If that text box is then clicked, it becomes 100% opaque, and a 0.7 transparent textbox in turn appears beneath that one, and so on until the user stops clicking the trigger text boxes. Unfortunately it won't work, and Chrome's console isn't telling me about any errors - so I'm stumped. The HTML is below:

2. <div class="row quatro">
3.   <div class="gridfix">
4.     <div class="medium-12 columns section center">
5.       <h1> What are the options? </h1>
6.           <input id="trigger" type="text" placeholder="Type in a choice" />
7.     </div>
8.   </div>
9. </div>

Any pushes in the right direction would be very much appreciated. I'm using jQuery 2 on the Foundation 5 framework if that helps.

Thanks again.