Есть форма с такой структурой полей
<dl>
<dt><label for="phone">Phone</label><span class="add-link" style="margin-left:213px" onclick="addField()">add</span></dt>
<dd><input type="text" id="phone" class="long-input" name="phone" /></dd>
<dt><label for="email">Email</label><span class="add-link" style="margin-left:219px" onclick="addField()">add</span></dt>
<dd><input type="text" id="email" class="long-input" name="email" /></dd>
</dl>
<span> здесь - это ссылка-кнопочка при нажатии на к-рую будет добавляться еще одно поле ниже, т.е. я хочу добавлять еще один <dd>. Опыт в js совсем небольшой, поэтому не уверен как лучше это сделать. Появилась идея заюзать target, передавая в параметре event. Но в функцию попадет указатель на span, т.е. нужно вернутся на уровень выше, в dt. От него перейти к следующему соседу (dd), но не просто к следующему, а к последнему (вперед лепить нельзя, т.к. первое поле может уже быть заполнено), и после него добавить еще один dd. Можно ли такое замутить, и если можно то как? (На чистом js).
p.s. Если лень писать код, дайте хотя бы методы к-рые мне потребуются. Спасибо.