I'm trying to add fields dynamically to a web page so that a user can enter in additional amenities to a form. By clicking on the add amenity button I can add the fields just fine. However I cannot manage to get the values out of the input fields dynamically. The objective is to display what they type after they leave the field (using `(':text').blur(myFunction);`). This works for every other field I've used it on but for some reason I can't get the value to dynamically pull after I leave an 'amenity' field.

```
$('#new_amenity').on('click', function (event) {

  amenity++;
  $(this).prev().after('<br/><input type="text" value="" class="' + amenity + '" placeholder="Amenity" id="amenity" />');

  event.preventDefault();

});

```

Below is the code that I've tried to use to assign to the array. 

```
//inside myfunction();
for(var i=1; $('#amenity').hasClass('.' + i);i++){
     amenities[i]=$('.'+i).val();   
}

//outside of function
$(":text").blur(myfunction);

```