serializeArray() only getting first value

serializeArray() only getting first value

Hi all - I have some dynamically created HTML that looks like this:

  1. <div class="medium-12 columns section center"> 
  2.       <h1> What are the options? </h1> 

  4.       <textarea name="choice1" class="multioption" placeholder="Type in a choice" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 66px; opacity: 1;"></textarea>&nbsp;  

  6. <textarea name="choice2" class="hidden" placeholder="Add another answer..." style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 66px; opacity: 1;"></textarea>&nbsp;

  8.  <textarea name="choice3" class="hidden" placeholder="Add another answer..." style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 66px; opacity: 1;"></textarea>&nbsp;

  10.  <textarea id="inputtrigger" name="choice4" class="hidden" placeholder="Add another answer..." style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 66px; opacity: 0.3;"></textarea> 

  12. <a class="button white hidden submitmulti" style="opacity: 1;">Add Question to Survey</a> </div>

The above code might look familiar to JakeCigar, he helped me get it on its feet. The name attributes are generated through a variable - everytime a user focuses on #inputrigger, a <textarea> is inserted after it, #inputtrigger loses its ID tag, and the new <textarea> gets the #inputrigger ID along with the name attribute of choiceX.

The only reason these textareas have a name attribute is because this page states that: 
 
only inputs with the “name” attribute present will be picked up by serializeArray().
Whether that's right or not I'm not sure - because the code in the tutorial didn't want to work in CodePen, JSfiddle or my own project.

What I'm trying to do is grab the values of these fields and display them as a list within a <div>. The jQuery I'm using looks like this:

  2. var fields = $('.multioption').serializeArray(), fieldDetails;
  3.                     $.each(fields, function (i, field) {
  4.                         $('.choices').append('<h5>' + field.value + '</h5>');
  5.                     });

But that only inserts the value of the first '.multioption' field, and no others.

Can anyone see where I'm going wrong? Pointers very much appreciated.

Thanks