title: Twirl repeated form field only first button updates
body: <p>I've attached the picture of my interface, which is created with the following twirl template code: </p>
  
  <pre><code>@(interests:List[String],levelsForm: Form[ManyInterests],user:models.User)(implicit request: RequestHeader,messages: Messages)
  
  @import helper._
  @import play.api.Play.current
  
  
  @import b3.vertical.fieldConstructor
  @opts = @{ Seq("1"-&gt;"Not very passionate","2"-&gt;"A little passionate",
      "3"-&gt;"Moderately passionate","4"-&gt;"Very passionate","5"-&gt;"Extremely passionate") }
  
  @main("Passion Levels",Some(user)) {
      &lt;h3&gt;For each of the previous entered interest and activities, please rate how passionate you are:
      &lt;/h3&gt;
      @helper.form(action = routes.ResponseController.newPassion) {
      @interests.map { interest =&gt;
              &lt;span&gt;&lt;b&gt;@interest&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
          @b3.radio(levelsForm("interestpassions"), options = opts,'_inline -&gt;true)
      }
          @b3.buttonType("submit", 'class -&gt; "btn btn-default"){Next}
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JgIZ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JgIZ8.png" alt="radio buttons"></a></p>
  
  <p>It generates the correct mapping of radio buttons for value pulled from a pgsql query, but the problem i am facing is that when I click on ANY radio button, the only row that displays changes is the very first row. So to explain using the image, if I select 'Very Passionate' for playing soccer, the radio button does not render an entry here, but the selection for the first passion of 's' changes to 'Very Passionate.'</p>
  
  <p>I'm not sure how to remedy this. I'm using <a href="http://play-bootstrap3.herokuapp.com/" rel="nofollow noreferrer">play-bootstrap3</a> which has worked great for all my other form components.</p>