Adding content by searching elements href using Javascript

Question

I've got a list of products which are Men & Women, using Javascript below each product I want to print a message to tell users that these products are available in whatever sizes are in-stock. To determine which products are Men & Women, I'm looking at the href and targeting "womensclothing" & "mensclothing" which works but when i go to print the messages they don't sit below the products correctly as you can see when you run the code. Any help on this would be appreciated.

Please note i do not have access to the html to make changes.

var womensClothing = document.querySelectorAll('.productTitle[href*="womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productPrice');
womensClothing.forEach(function(link, i) {
  womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});


var mensClothing = document.querySelectorAll('.productTitle[href*="mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productPrice');
mensClothing.forEach(function(links, el) {
  menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});

.productWrapper {
  margin: 0 0 10px;
  border: 1px solid black;
}

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>

Answer 1

Since the class for the price is same for all products: productPrice, you need to use the CSS Sibling operator ~ to select the elements that is the sibling of the specific <a> element.

var womensClothing = document.querySelectorAll('.productTitle[href*="/womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productTitle[href*="/womensclothing"] ~ .productPrice');
womensClothing.forEach(function(link, i) {
  womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});


var mensClothing = document.querySelectorAll('.productTitle[href*="/mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productTitle[href*="/mensclothing"] ~ .productPrice');
mensClothing.forEach(function(links, el) {
  menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});

.productWrapper {
  margin: 0 0 10px;
  border: 1px solid black;
}

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>