title: How to target multiple data attribute at once
body: <p>I have a list of products where i want to target them using the attribute &quot;data-ga-product&quot; which is unique for each product. What i want to achieve is to insert a span with a message like &quot;New In&quot; to these products I'm targeting.</p>
  <p>I've got this working if I do this separately but can you target several products at once so there's no need for duplication of code? I've tried the below but it only targets the first selector, or is there a better way of doing what I'm trying to achieve?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Attempt at targeting multiple data attributes at once
  var targetProduct = document.querySelectorAll('[data-ga-product="04245"]','[data-ga-product="263743"]' ).forEach(function (el){
      el.insertAdjacentHTML("beforeend", "&lt;span&gt;New In&lt;/span&gt;");
  });
  
  
  /*
  Targeting each indivudally
  var targetProduct = document.querySelector('[data-ga-product="04245"]');
  targetProduct.insertAdjacentHTML("beforeend", "&lt;span&gt;New In&lt;/span&gt;");
  var targetProduct = document.querySelector('[data-ga-product="263743"]');
  targetProduct.insertAdjacentHTML("beforeend", "&lt;span&gt;New In&lt;/span&gt;");
  */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {padding: 5px 0;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article class="container" data-ga-product="04245"&gt;
    &lt;div class="productContent"&gt;
      &lt;a class="productTitle" href="#product1"&gt;Product 1&lt;/a&gt;
      &lt;div class="productPrice"&gt;€&amp;nbsp;19,90&lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="container" data-ga-product="05395"&gt;
    &lt;div class="productContent"&gt;
      &lt;a class="productTitle" href="#product2"&gt;Product 2&lt;/a&gt;
      &lt;div class="productPrice"&gt;€&amp;nbsp;109,90&lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="container" data-ga-product="263743"&gt;
    &lt;div class="productContent"&gt;
      &lt;a class="productTitle" href="#product3"&gt;Product 3&lt;/a&gt;
      &lt;div class="productPrice"&gt;€&amp;nbsp;59,90&lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="container" data-ga-product="60493"&gt;
    &lt;div class="productContent"&gt;
      &lt;a class="productTitle" href="#product4"&gt;Product 4&lt;/a&gt;
      &lt;div class="productPrice"&gt;€&amp;nbsp;23,90&lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>