How can I remove duplicates from each item in jsrender template?

Question

I am trying to remove duplicate file from each div in jsrender but not able to do it correctly as all the duplicates get removed.

$('.media-holder').each(function () {
  $('.media-item').each(function () {
    $('.media-item:contains("' + $(this).text() + `enter code here`'"):gt(0)').remove();
  });
});

Current output:

**Files part 1**
abc file
def file
abc file
**Files part 2**
abc file
def file
abc file
def file
ghi file

Desired Output:

**Files part 1**
abc file
def file
**Files part 2**
abc file
def file
ghi file

Answer 1

Use media-holder as a selector context

$('.media-holder').each(function(i, holder) {
  $('.media-item').each(function() {
    $('.media-item:contains("' + $(this).text() + '"):gt(0)', holder).remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="media-holder">
  <div class="media-item">abc file</div>
  <div class="media-item">def file</div>
  <div class="media-item">abc file</div>
</div>
<br/>
<div class="media-holder">
  <div class="media-item">abc file</div>
  <div class="media-item">def file</div>
  <div class="media-item">abc file</div>
  <div class="media-item">def file</div>
  <div class="media-item">ghi file</div>
</div>