Filter one row of divs based on second row div selection - jquery

Issue

I'm trying to figure out if it's possible to filter a row of divs based on selection from a second row of divs. To put it in example, let's say we have the following structure

<div class="firstRow">Text1</div>
<div class="firstRow">Text2</div>
<div class="firstRow">Text3</div>

<div class="secondRow">Text1</div>
<div class="secondRow">Text2</div>
<div class="secondRow">Text3</div>

What I want is to hide/remove Text2 and Text3 divs (secondRow class) if Text1 div (firstRow class) is clicked. Therefore only Text1 (secondRow class) should remain. So basically firstRow divs should work like filters. I tried making 2 arrays from these 2 classes and looping through them to compare their text values, but don't know where to go from there.

Solution

I think you got a downvote because someone wants you to post what you've tried instead of just asking for an answer. In any case:

$('.firstRow').click(function() {
  //hide all, then show only those with the same text content
  $('.secondRow').hide().filter(':contains(' + $(this).text() + ')').show();
});

https://jsfiddle.net/q39ta071/

Answered By - Mark