JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<ul id="attachmentlist" class="sortablegroup ui-sortable">
    <li id="li_1">
      <div class="wrapper">
        <img src="/cache/path/:upload:pages:test:11069-0144.jpg/width/100/height/100/crop/1/name/11069-0144.jpg" alt=".">
        <input type="checkbox" class="checkbox" name="image_1" id="image_1" value="11069-0144.jpg" checked="checked">
        <div class="attachmentdetails">
          <p class="attachmentname">11069-0144.jpg</p>
          <p class="attachmentsize">Uploaded:  (4.75 MB jpg)</p>
          <p>
            <span>Title: </span>
            <br>
            <input class="text" type="text" name="title_1" id="title_1" value="">
          </p>
          <p>
            <span>Description: </span>
            <br>
            <input class="text" type="text" name="description_1" id="description_1" value="">
          </p>
        </div>
      </div>
    </li>
    <li id="li_2">
      <div class="wrapper">
        <img src="/cache/path/:upload:pages:test:11069-0388.jpg/width/100/height/100/crop/1/name/11069-0388.jpg" alt=".">
        <input type="checkbox" class="checkbox" name="image_2" id="image_2" value="11069-0388.jpg" checked="checked">
        <div class="attachmentdetails">
          <p class="attachmentname">11069-0388.jpg</p>
          <p class="attachmentsize">Uploaded:  (4.54 MB jpg)</p>
          <p>
            <span>Title: </span>
            <br>
            <input class="text" type="text" name="title_2" id="title_2" value="">
          </p>
          <p>
            <span>Description: </span>
            <br>
            <input class="text" type="text" name="description_2" id="description_2" value="">
          </p>
        </div>
      </div>
    </li>
    <li class="unticked" id="li_5">
      <div class="wrapper">
        <img src="/cache/path/:upload:pages:test:sample.jpg/width/100/height/100/crop/1/name/thumbnail.png" alt="sample.jpg">
        <input type="checkbox" class="checkbox" name="image_5" id="image_5" value="sample.jpg">
  ...

JavaScript

var exists = false;
$('#attachmentlist .checkbox').each(function() {
    if ($(this).val() == 'sample.jpg') {
        exists = $(this).closest('li');
    }
    alert($(this).closest('li').length());
});

if (exists) {
    thumbnail = exists.find('img');
    newid = thumbnail.attr('src').replace(/\.(jpg|jpeg|png|gif)$/,$.now()+'.'+'$1');
    thumbnail.attr({src:newid});
}