JSFiddle - React, Tailwind, and code Playground

by Alfie

HTML

<div class="product">
     <div class="prod-img"><img src="#" /></div>
     <div class="prod-name">
          <a href="#">Product Name Here</a>
          <a href="#">Stuff we don't want to display</a>
     </div>
</div>
<div class="product">
     <div class="prod-img"><img src="#" /></div>
     <div class="prod-name">
          <a href="#">Product Name Here</a>
          <a href="#">Stuff we don't want to display</a>
     </div>
</div>
<div class="product">
     <div class="prod-img"><img src="#" /></div>
     <div class="prod-name">
          <a href="#">Product Name Here</a>
          <a href="#">Stuff we don't want to display</a>
     </div>
</div>

JavaScript

var products = $('.prod-name').find('a:first').map(function(){
return $(this).text();
}).get().join('|');
alert(products);