Welcome to stackoverflow.

According to the W3C Markup Validation Service tool, this document contains a number of errors, including a “Duplicate ID” error. (See: W3C Validator)

Note: The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)

So we need to use a class instead of ‍newpost id to target those elements.

Change the HTML to the following content — by formatting the code and fixing those errors:

<div id="main">
    <div style="margin-left: 50px;">
        <input type="checkbox" />
        <div class="flip-card">
            <div class="front">
                <h1>Գերմանիա</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div class="back">
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p class="newpost" style="display: none;"> Test text</p>
                <hr />
            </div>
        </div>
    </div>
    <div style="margin-left: 50px ;">
        <input type="checkbox" />
        <div class="flip-card">
            <div class="front">

                <h1>Գերմանիա</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div class="back">
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p class="newpost" style="display: none;"> Test text</p>
                <hr />
            </div>
        </div>
    </div>
</div>

Script:

This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.

<script>
    document.querySelectorAll('button').forEach((button) => {
        button.addEventListener('click', (event) => {
            const newpostElement = event.target.parentElement.querySelector('.newpost');
            if (newpostElement.style.display !== 'none')
                newpostElement.style.display = 'none';
            else
                newpostElement.style.display = 'block';
        })
    });
</script>

Learn about HTML errors:

• Invalid use of name attribute for div element
• Invalid use of padding: ;
• Element div not allowed as child of element label
• The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
• Duplicate ID button.

According to your Question , What I Understand you want something like this:=

$("h1").on("click", function(){
    console.log($(this).children("div"));
    $(this).siblings("div.content").slideToggle();
});​

.content{
 display:none;
 margin: 10px;   
}

h1{
    font-size: 16px;
    font-wieght: bold;
    color: gray;
    border: 1px solid black;
    background: #eee;
    padding: 5px;
}
h1:hover{
 cursor: pointer;
 color: black;   
}

<div class="article">
    <h1>TITLE 1</h1>
    <div class="content">content 1</div>
</div>
<div class="article">
    <h1>TITLE 2</h1>
    <div class="content">content 2</div>
</div>
<div class="article">
    <h1>TITLE 3</h1>
    <div class="content">content 3</div>
</div>
<div class="article">
    <h1>TITLE 4</h1>
    <div class="content">content 4</div>
</div>

http://jsfiddle.net/Rwx7P/3/

You have two blocks with same ID (button and newpost), it must be always diffrent on one page.

function toggle(id) {
  var div = document.getElementById(id);
  if (div.style.display !== 'none') {
    div.style.display = 'none';
  }
  else {
    div.style.display = 'block';
  }
}

<div id="main">
  <div name="first flip card" style="margin-left: 50px; padding: ">
    <label>
      <input type="checkbox" />
      <div class="flip-card">
        <div class="front">
          <h1>Գերմանիա</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div class="back">
          <h1>About me</h1>
          <hr />
          <p>some text</p>
          <button onclick="toggle('newpost1')">hide/show</button>
          <p id="newpost1" style="display: none">Test text</p>
          <hr />
        </div>
      </div>
    </label>
  </div>
  <div name="second flip card" style="margin-left: 50px">
    <label>
      <input type="checkbox" />
      <div class="flip-card">
        <div class="front">
          <h1>Գերմանիա</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div class="back">
          <h1>About me</h1>
          <hr />
          <p>some text</p>
          <button onclick="toggle('newpost2')">hide/show</button>
          <p id="newpost2" style="display: none">Test text</p>
          <hr />
        </div>
      </div>
    </label>
  </div>
</div>

I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn’t work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.

this is my flip cards

<div id="main">
        <div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">     
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
                                <button id='button' >hide/show</button>
                 <p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
         </div>
          <div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
                    
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
                               <button id='button' >hide/show</button>
                <p id="newpost" style="display: none;" > Test text</p>
<hr />              
</div>
</div>
</label>
          </div>
</div>  

this is my script for hide/show button

<script>
var button = document.getElementById('button');

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};
</script>

i hope you can help me

I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.