Finding and Inserting Item

I'd like to check every attribute src of the image that has class .sogreen that has a unique prefix on the start of the name or anywhere in the name. After that, it will find the img element that has a title attribute that has the same prefix on the first image that we get, and then insert that image below the first image.

HTML

<div class="original">
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <img src="pref44-awesome.png" class="img-responsive sogreen">
</div>

<div class="image-entry-to-insert">
  <img src="test12.png" title="pref1" class="img-responsive sogreen">
  <img src="test4.png" title="pref99" class="img-responsive sogreen">
  <img src="test54.png" title="pref44" class="img-responsive sogreen">
</div>

Result Should be:

<div class="original">
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <!-- Inserted Item -->
  <img src="test12.png" title="pref1" class="img-responsive sogreen">
  <!-- End of Inserted Item -->
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <!-- Inserted Item -->
  <img src="test4.png" title="pref99" class="img-responsive sogreen">
  <!-- End of Inserted Item -->
  <img src="pref44-awesome.png" class="img-responsive sogreen">
  <!-- Inserted Item -->
  <img src="test54.png" title="pref44" class="img-responsive sogreen">
  <!-- End of Inserted Item -->
</div>

Rough JS Not working:

var imgsrc = $("img.sogreen").attr('src');
console.log(imgsrc);
$(imgsrc).each(function(index, value) {
  var imgData = $(this);
  $("img").each(function(index2, value2) {
    var elementTocounter = $(this).attr('title');
    if (imgData == elementTocounter) {
      // TODO img insertafter so green
    }
  });
});

Note: sogreen image might change continuously so for example if the sogreen change the src for an instance the below image should be updated as well.

You can do it like this in vanilla JS:

// get original images
let origImages = document.querySelectorAll(".original .sogreen")

// loop through originals
origImages.forEach((orig) => {
    // get prefix
    let prefix = orig.attributes.src.value.split("-")[0]

    // get element to be inserted
    let insert = document.querySelector(`[title='${prefix}'].sogreen`)

    // insert element as sibling
    // https://stackoverflow.com/a/4793630/1366033
    orig.parentNode.insertBefore(insert, orig.nextSibling);
})

Demo in Stack Snippets

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js -->

// get original images
let origImages = document.querySelectorAll(".original .sogreen")

// loop through originals
origImages.forEach((orig) => {
    // get prefix
    let prefix = orig.attributes.src.value.split("-")[0]

    // get element to be inserted
    let insert = document.querySelector(`[title='${prefix}'].sogreen`)

    // insert element as sibling
    // https://stackoverflow.com/a/4793630/1366033
    orig.parentNode.insertBefore(insert, orig.nextSibling);
})

<!-- language: lang-html -->

<div class="original">
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <img src="pref44-awesome.png" class="img-responsive sogreen">
</div>

<div class="image-entry-to-insert">
  <img src="test12.png" title="pref1" class="img-responsive sogreen">
  <img src="test4.png" title="pref99" class="img-responsive sogreen">
  <img src="test54.png" title="pref44" class="img-responsive sogreen">
</div>


  

<!-- end snippet -->