Почему некоторые существующие элементы перемещаются, когда я создаю новый элемент, и почему заменяются другие существующ ⇐ Jquery

[Anonymous]

Я создаю адресную книгу, но столкнулся с некоторыми проблемами.
Ниже приведена функция, которая запускается нажатием кнопки:
let addContact = () => {
let contactInfo = ['Name', 'Number'];
let addressInfo = ['Address Line 1', 'Address Line 2', 'Address Line 3', 'Address Line 4', 'Postcode'];
let $newInfo = $('div').addClass('listedAddress').appendTo('#addressList');
$('h6').text(`${contactInfo[0]} - ${contactInfo[1]}`).appendTo($newInfo);
$('p').text(`${addressInfo}`).appendTo($newInfo);

Я намерен создать новый с классом listedAddress и вставить его в уже существующий с идентификатором AddressList. Затем я хочу добавить 2 текстовых элемента внутри нового с соответствующим текстом, показанным выше.
На следующем снимке экрана показано отображение, когда я нажимаю «Выполнить»:
Отображение, когда я нажимаю «Выполнить»:


и на этом снимке экрана показано отображение после Я нажал кнопку один раз:
Отображение при нажатии кнопки:


По какой-то причине существующий элемент заменяется новым, а также существует 3 новых элемента, несмотря на отсутствие итерации. Меня также смущает, почему панель поиска и кнопка перемещаются внутри , когда я нажимаю кнопку. Я пытался придать панели поиска абсолютное положение, но это не сработало.

The Digital Address Book





The Digital Address Book



Add Contact

Saved Addresses:


1Name - 1Number
1Address Line 1
1Address Line 2
1Address Line 3
1Address Line 4
1Postcode




$('#addContact').on('click',function(){addContact()});



.listedAddress {
text-align: center;
background-color: rgb(236, 235, 220);
border: solid 1px black;
}

.contactInfo {
font-size: 20px;
margin-top: 2px;
margin-bottom: 1px ;
}

#mainHeading {
text-align: center;
}

.searchBar input[type = text]{
position: absolute;
left: 50%;
translate: 65% ;
width: 30%;
background-color: white;
color: black;
font-size: 20px;
border-radius: 6px;
}

#addressList {
position: fixed;
top: 10%;
left: 50%;
translate: -50% 0%;
width: 300px;
height: 600px;
margin: auto;
border-color: black;
border: solid 5px;
background-color: rgb(222, 221, 208);
overflow-y: auto;
}

#listTitle {
text-align: center;
color: black;
}

.address {
margin-top: 1px;
margin-bottom: 2px;
}