JSFiddle - React, Tailwind, and code Playground

by Satpal Singh

HTML

<ul class="product-list">
  <li><img src="https://i.imgur.com/Jdtk2XH.png"></li>
  <li><img src="https://i.imgur.com/rFEw1ZQ.png"></li>
  <li><img src="https://i.imgur.com/OZq9PFh.png"></li>
  <li><img src="http://i.imgur.com/EAT4hW8.png"></li>
  <!-- Not targetted -->
  <li><img src="https://i.imgur.com/8GSRqEg.png"></li>
</ul>

CSS

ul { list-style-type: none; }

JavaScript

$(function() {
  /*Products we're targetting*/
  var products = ["Jdtk2XH", "rFEw1ZQ", "OZq9PFh", "8GSRqEg"];

  $.each(products, function(key, value) {
    //Get the reference of the img element 
    var img = $('ul.product-list li img[src*="' + value + '"]');
    //Add Class
    img.addClass('special_offer_image');
    //Insert
    $("<p>Test</p>").insertBefore(img);
  });
});