jQuery - Создание массива объектов с использованием каждого

Я новичок в jQuery.

У меня есть простая форма с n строками (хотя я не использую html-форму):

<div id="myCities">
  <div class="line">City1: <input type="text" /></div>
  <div class="line">City2: <input type="text" /></div>
  <div class="line">City3: <input type="text" /></div>
  <button>Add Your Cities</button>
</div>

У меня есть переменная javascript с именем "users" с общими данные пользователя:

var users = [
  { "username": "John", "year": 1999},
  more users...
]

При нажатии на кнопку я хочу добавить массив городов к данным пользователя (допустим, мы работаем с Джоном, поэтому он [0])

Я хочу, чтобы объект выглядел так:

{ "username": "John",
  "year": 1999,
  "cities": [
    { "City1": $('.line input).val() },
    ... and so on for the 3 cities entered
  ]   
}

Я пробовал использовать

$.each($('.line'), function() { 
   // but I'm not really sure what to put here 
});

Спасибо!