Passwords list add and remove and save data with Json

JavaScript
1

I have a problem with my project that the passwords that I add with the button or removing them are duplicating and only when I refresh the site it show the data that was saved. Can someone help me with this problem?

HTML:
<form class="add-password">
	<input class="header-input" type="text" placeholder="New Passwords" name="">
	<button class="header-button" name="">Add Password</button>
</form>
<ul class="password-list">

</ul>



JS:

const passwordControl = document.querySelector('.add-password');
const headerInput = document.querySelector('.header-input');
const passwordList = document.querySelector('.password-list');

let passwordData;

if(localStorage.password_saved){
	passwordData = JSON.parse(localStorage.password_saved);
}else{
	passwordData = [];
}


function addPassword(){

	passwordData.forEach(function (item,i){
		let li = document.createElement('li');
		li.classList.add('password-item');
		li.innerHTML = `<h3 class="text-task">${item.value}</h3><button class="password-remove"><img src="img/bin.png"></button>`;

		passwordList.append(li);

		const btnPasswordRemove = li.querySelector('.password-remove');

		btnPasswordRemove.addEventListener('click', function(){
			passwordData.splice(i,1);
			addPassword();
		});
	});

	localStorage.password_saved = JSON.stringify(passwordData);
}

passwordControl.addEventListener('submit', function(event){
	if(headerInput.value != ''){
		let newPassword = {
			value: headerInput.value,
		}
		passwordData.push(newPassword);
		headerInput.value = '';
		addPassword();
	}
});
addPassword();




CSS:

.add-password{
  height: 80px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.header-input{
  width: 100%;
  margin-right: 10px;
}
.header-button{
  width: 30%;
  height: 100%;
  background: #fff;
  font-size: 35px;
  border-radius: 12px;
  transition: 0.3s;
  outline: 0;
  border: 0;
}
.header-button:hover{
  background-color: #47B5FF;
}



.password-list{
  display: grid;
  height: 100%;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background: #256D85;
  padding: 10px;
  border-radius: 20px;
  height: 100%;
  margin-top: 35px;
  overflow: auto;
}
.text-task{
  font-size: 25px;
}
.password-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}

button{
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 5px;
  width: 50px;
  height: 50px;
  transition: 0.5s;
}
button:hover{
  background: #47B5FF;
}
button img{
  width: 25px;
}