Display only the first of <h1> that has a different name

Question

The headings are dynamically obtained. The structure currently looks like this:

<h1>HEADING CONTENT 1</h1>
some content
<h1>HEADING CONTENT 1</h1>
some content
<h1>HEADING CONTENT 1</h1>
some content
<h1>HEADING CONTENT 2</h1>
some content
<h1>HEADING CONTENT 2</h1>
some content

I only need to display the first instance of each heading. How do I do that?

EDIT: I'm sorry, I'm currently at a different PC. I will as soon as I can.

Answer 1

if your headings are all actually siblings as in your structure, you could use the general sibling selector/combinator ~ and thus display: none all the repeated headings

h1 ~ h1, 
h2 ~ h2 {
   display: none;
}

Example on codepen: http://codepen.io/anon/pen/Evuhr/

---

After your update:

If the headings are all <h1> and you have to check the text contained, you need to use javascript/jQuery like so

$(function() {
  var title = ""
  $('h1').each(function() {
     if ($(this).text() !== title) {
        title = $(this).text();
     } 
     else {
       $(this).hide();  
     }    
  });  
});

Example on codepen: http://codepen.io/anon/pen/FBltb