JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
  <tr>
    <td>a column</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>some column|1</td>
    <td>
      <input type="text" id="abc|1" value="abc|1" />
    </td>
    <td><img src="http://findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_01.png"></td>
    <td>text</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td>
      <input type="text" id="def|1" value="def|1" />
    </td>
    <td>text</td>
  </tr>
  <tr>
    <td>third column|1</td>
    <td>
      <input type="text" id="ghi|1" value="ghi|1" />
    </td>
    <td><img src="http://findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_01.png"></td>
  </tr>
  <tr>
    <td>fourth column|1</td>
    <td>
      <input type="text" id="jkl|1" value="jkl|1" />
    </td>
  </tr>
  <tr>
    <td>some column|2</td>
    <td>
      <input type="text" id="abc|2" value="abc|2" />
    </td>
    <td><img src="http://findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_01.png"></td>
    <td>text</td>
  </tr>

  <tr>
    <td>another column|2</td>
    <td>
      <input type="text" id="def|2" value="def|2" />
    </td>
    <td>text</td>
  </tr>
  <tr>
    <td>third column|2</td>
    <td>
      <input type="text" id="ghi|2" value="ghi|2" />
    </td>
    <td><img src="http://findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_01.png"></td>
  </tr>
  <tr>
    <td>fourth column|2</td>
    <td>
      <input type="text" id="jkl|2" value="jkl|2" />
    </td>
  </tr>
  <tr>
    <td>some column|3</td>
    <td>
      <input type="text" id="abc|3" value="abc|3" />
    </td>
    <td><img src="http://findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_01.png"></td>
    <td>text</td>
  </tr>
  <tr>
    <td>another column|3</td>
    <td>
      <input type="text" id="def|3" value="def|3" />
    </td>
    <td>text</td>
  </tr>
  <tr>
    <td>third column|3</td>
    <td>
      <input type="text" id="ghi|3" value="ghi|3" />
    </td>
    <td><img...

JavaScript

var positions = {};
$("table tr").each(function(i) {
  id = $(this).find(':nth-child(2) input')[0].id.substring(0,3);
  if(!positions[id]) {
    positions[id] = $($(this).find(':nth-child(2)')[0]);
  } else {
  	positions[id].after($(this).find(':nth-child(2)')[0]);
    positions[id] = positions[id].next();
    $(this).remove();
  }
});

/*$("table td:nth-child(2) [id$=2]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('text')").index() > -1) {
    $newRow.find("td:contains('text')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});

/*$("table td:nth-child(2) [id$=3]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('text')").index() > -1) {
    $newRow.find("td:contains('text')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});
*/