С помощью JS пытаюсь в блоке "block-price" сформировать новый блок с соответствующей номерной ссылкой внутри, на основе атрибутов href и title из ссылки которая лежит в "block-description". Ссылки и текст формируются, но только во всех блоках "block-price" ссылка "Link name #3". Что нужно поправить чтобы в первом блоке "block-price" была ссылка "Link name #1", во втором - "Link name #2" и в третьем - "Link name #3"?
document.addEventListener("DOMContentLoaded", () => {
let blockPrice = document.querySelectorAll('.block-price');
blockPrice.forEach((item) => {
let newTitle = document.createElement('div');
let description = document.querySelectorAll('.block-description');
newTitle.classList.add('new-title');
description.forEach((i) => {
let name = i.querySelector('.link').getAttribute('title');
let link = i.querySelector('.link').href;
newTitle.innerHTML =
`
<a href="` + link + `">` + name + `</a>
`;
});
item.prepend(newTitle);
});
});
.list {
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
}
.item {
display: flex;
border: 1px solid black;
margin: 0 0 20px 0;
padding: 20px;
justify-content: center
}
.block-price {
background-color: green;
padding: 40px;
font-weight: bold;
}
.block-description {
background-color: orange;
padding: 40px;
font-weight: bold;
}
<div class="container">
<ul class="list">
<li class="item">
<div class="block-price">
<div class="new-price">1000$</div>
<div class="old-price">500$</div>
<div class="current-price">800$</div>
</div>
<div class="block-description">
<div class="title">
<a class="link" href="https://s.imgur.com/images/404/cat1weyes.png" title="Link name #1"></a>
</div>
<div class="text">Text text text</div>
</div>
</li>
<li class="item">
<div class="block-price">
<div class="new-price">1000$</div>
<div class="old-price">500$</div>
<div class="current-price">800$</div>
</div>
<div class="block-description">
<div class="title">
<a class="link" href="https://s.imgur.com/images/404/cat2weyes.png" title="Link name #2"></a>
</div>
<div class="text">Text text text</div>
</div>
</li>
<li class="item">
<div class="block-price">
<div class="new-price">1000$</div>
<div class="old-price">500$</div>
<div class="current-price">800$</div>
</div>
<div class="block-description">
<div class="title">
<a class="link" href="https://s.imgur.com/images/404/cat3weyes.png" title="Link name #3"></a>
</div>
<div class="text">Text text text</div>
</div>
</li>
</ul>
</div>