Get a value out of element with same variable clas

Question

Posted a similar question, but may be this case will make more sense. Got a table with many first td's of tr having a duplicate first td in a different tr. I'm using these for identification. I want to pull a value from 2nd tr and insert it into already appended(!) td in the first tr. Here is a quick html code example

<div class="tableclass">
  <table>
    <tbody>
      <tr>
       <td>id1</td>
       <td>something else</td>
       <td>1</td>
      </tr>
      <tr>
       <td>id2</td>
       <td>something else</td>
       <td>2</td>
      </tr>
      <tr>
       <td>id2</td>
       <td>something else</td>
       <td>3</td>
      </tr>
      <tr>
       <td>id3</td>
       <td>something else</td>
       <td>4</td>
      </tr>
      <tr>
       <td>id1</td>
       <td>something else</td>
       <td>5</td>
      </tr>
    <tbody>
  </table>
<div>

And here is my jquery code

$(".tableclass table tbody tr").each(function(){
  $(this).append('<td class="fbctr"></td>');
   var trclass = $(this).find("td:first-child").html();
   $(this).addClass(trclass);
   // this is where I'm having a problem
   var fbctr = $(this).parent().filter(trclass).eq(2).find("td:nth-child(3)");
   $(this).find(".fbctr").html(fbctr);
});

Answer 1

OK, your problem is that jquery .filter() works on a set of given DOM elements. So you have to first select <tr> elements and then use .filter(). In your question you are applying it on your <table>

So, Your JavaScript code will be like this:

$(".tableclass table tbody tr").each(function(){
    var trclass = $(this).find("td:first-child").html();
    $(this).addClass(trclass);
    var fbctr = $(this).parent().find('tr').filter('.'+trclass).eq(1).find("td:nth-child(3)").html();
    if(typeof fbctr !== "undefined"){
        console.log(fbctr);
        $(this).find(".fbctr").html(fbctr);
    } 
});

Update(Corrected Code):

In case you want to copy the value of first occurring element into the second occurring element, use this code:

$(".tableclass table tbody tr").each(function(){
    var trclass = $(this).find("td:first-child").html();
    $(this).addClass(trclass);
    var elements = $(this).parent().find('tr').filter('.'+trclass);
    if(elements.length > 1){
      var fbctr = elements.eq(0).find("td:nth-child(3)").html();
      if(typeof fbctr !== "undefined")
        $(this).find(".fbctr").html(fbctr);
    }
});

And in case you want to copy the value of second occurring element into the first occurring element, use this code:

$(".tableclass table tbody tr").each(function(){
    var trclass = $(this).find("td:first-child").html();
    $(this).addClass(trclass);
    var elements = $(this).parent().find('tr').filter('.'+trclass);
    var fbctr = elements.eq(1).find("td:nth-child(3)").html();
    if(typeof fbctr !== "undefined")
        $('.'+trclass).not(this).find(".fbctr").html(fbctr);
});

Answer 2

You can filter out the duplicate rows first and remove all the duplicate rows but not first, then in the first rows append the 3rd td element of the last duplicate row.

In the below solution i am also removing the duplicate rows, you can keep/remove that based on your requirement.

Here is the working solution where i have added few extra node for testing of the solution.

var rows = $(".tableclass table tbody tr")
rows.each(function() {
  var trclass = $(this).find("td:first-child").html();
  $(this).addClass(trclass);
  var dupeRows = rows.filter("." + trclass);
  rows.filter("." + trclass).not(":first").remove();
  if (dupeRows.length > 1) {
    rows.filter("." + trclass).first().append('<td>' + $(dupeRows[dupeRows.length - 1]).find("td:nth-child(3)").html() + '</td>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableclass">
  <table>
    <tbody>
      <tr>
        <td>id1</td>
        <td>something else</td>
        <td>1</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>2</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>3</td>
      </tr>
      <tr>
        <td>id3</td>
        <td>something else</td>
        <td>4</td>
      </tr>
      <tr>
        <td>id1</td>
        <td>something else</td>
        <td>5</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>5</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>8</td>
      </tr>
      <tbody>
  </table>
  <div>
    ;