Collect Attribute values ​and display it in the DOM whit JavaScript

I am developing a website that contains a series of products, each block contains a certain product, when hovering the mouse I need the name of this product to appear,

However, the product name is stored through an ‘DATA’ attribute. for example:

data-legend-item = “White T-Shirt”

I need to collect the value of this data attribute and make it appear every time I hover over it.

Remembering that they are a collection of blocks so I need to collect them from all data-legend-items on the page.

ps: notice that I made a script that only collects this value only from the first blockthat contains a data-legend-item

[

function dataTitleProduct(productItem) {
    // collecting data-legend-item main attribute

    var productItem = document.getElementById('item-title').getAttribute("data-legend-item");
// pulling the value of the data-legend-item attribute and inserting it in the html
    document.querySelector('[data-legend-item]').innerHTML = productItem;

}

dataTitleProduct();

.products {
    /* Div pai*/
    max-width: 320px;
    width: 100%;
}


/* Filhos recebendo distanciamento de 5 margin*/

.products .product-view {
    margin: 5px auto;
}


/* */

.products .product-view {
    max-width: 200px;
    display: flex;
    flex-flow: column wrap;
    text-align: center;
    margin: 0 auto;
}

.product-view .product {
    height: 150px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px #c7c7c7;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all .3s ease;
    position: relative;
}

.product-view .product:hover {
    box-shadow: 0 7px 7px rgba(90, 90, 90, 0.2);
    cursor: pointer;
    content: '';
}


/* Titulo do Produto*/

.product-view .product [data-legend-item] {
    display: block;
    line-height: 220px;
    position: relative;
    font-size: 1.1rem;
    color: #ffffff;
    z-index: 1;
}

.product-view .product [data-legend-item]:before {
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    content: '';
}

<div class="products">
                                
                                <div class="product-view">
                                    
                                    <div id="item" class="product">
                                        
                                        <div id="item-title" data-legend-item="T-shirt White"></div>
                                    </div>

                                </div>

                                
                                <div class="product-view">
                                    
                                    <div id="item" class="product">

                                        <div id="item-title" data-legend-item="Shoes"></div>
                                    </div>

                                </div>

                                
                                <div class="product-view">
                                    
                                    <div id="item" class="product">

                                        <div id="item-title" data-legend-item="Black T-shirt"></div>
                                    </div>

                                </div>
                            </div>

]1

Answer

I prefer to hide and show using CSS put take a look at this this.

always use id names only once in html file

document.querySelectorAll('.product-view').forEach(e => {
  e.addEventListener('mouseover', event => {
    let item_title = event.currentTarget.querySelector('.item-title');
    item_title.innerText = item_title.dataset.legendItem;
  });
  
  e.addEventListener('mouseout', event => {
    let item_title = event.currentTarget.querySelector('.item-title');
    item_title.innerText = '';
  })
})

.products {
  /* Div pai*/
  max-width: 320px;
  width: 100%;
}


/* Filhos recebendo distanciamento de 5 margin*/

.products .product-view {
  margin: 5px auto;
}


/* */

.products .product-view {
  max-width: 200px;
  display: flex;
  flex-flow: column wrap;
  text-align: center;
  margin: 0 auto;
}

.product-view .product {
  height: 150px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px #c7c7c7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all .3s ease;
  position: relative;
}

.product-view .product:hover {
  box-shadow: 0 7px 7px rgba(90, 90, 90, 0.2);
  cursor: pointer;
  content: '';
}


/* Titulo do Produto*/

.product-view .product [data-legend-item] {
  display: block;
  line-height: 220px;
  position: relative;
  font-size: 1.1rem;
  color: #ffffff;
  z-index: 1;
}

.product-view .product [data-legend-item]:before {
  width: 100%;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  content: '';
}

<div class="products">

  <div class="product-view">

    <div id="item" class="product">

      <div class="item-title" data-legend-item="T-shirt White"></div>
    </div>

  </div>


  <div class="product-view">

    <div id="item" class="product">

      <div class="item-title" data-legend-item="Shoes"></div>
    </div>

  </div>


  <div class="product-view">

    <div id="item" class="product">

      <div class="item-title" data-legend-item="Black T-shirt"></div>
    </div>

  </div>
</div>