Error "Show More" html button

Question

I created an area on my site where it contains a small text, and a button at the end "Show More" I put two items like this, But every time I click on the "Show More" button on the second item, the first content opens. What could be causing this error ?

   
.hide {
    display:none;
}

input[type="checkbox"] {
    display: none;
    
}
input[type="checkbox"]:checked ~ .hide {
    display: block
}
input[type="checkbox"]:not(:checked) ~ .hide {
    display: none;
}

<input type="checkbox" id="btn-a">

<label for= "btn-a" >
    <p><i class="fa fa-arrow-circle-down"></i><strong> Mostrar Mais</strong></p>
</label>

<div class="hide">
    <p>Essas informações ficam disponíveis on-line e podem ser acessadas por meio do nosso site, ou aplicativo no celular, tablete, smartphones, através de senha individual para cada condomínio.
Visando sempre, a obtenção de forma inteligente e integrada um melhor resultado em nossos serviços, realizamos sem ônus uma análise nas pastas balancetes dos últimos 12 meses. Após essa análise, apresentamos um planejamento financeiro com intuito de reduzir custos desnecessários e adequar as despesas das quais realmente o condomínio necessita.<p>
</div>

<input type="checkbox" id="btn-a">

<label for= "btn-a" >
    <p><i class="fa fa-arrow-circle-down"></i><strong> Mostrar Mais</strong></p>
</label>

<div class="hide">
    <p>Essas informações ficam disponíveis on-line e podem ser acessadas por meio do nosso site, ou aplicativo no celular, tablete, smartphones, através de senha individual para cada condomínio.
Visando sempre, a obtenção de forma inteligente e integrada um melhor resultado em nossos serviços, realizamos sem ônus uma análise nas pastas balancetes dos últimos 12 meses. Após essa análise, apresentamos um planejamento financeiro com intuito de reduzir custos desnecessários e adequar as despesas das quais realmente o condomínio necessita.</p>
</div>

Answer 1

You were using the same id for both inputs. I solved it this way:

.hide {
  display:none;
}
input[type="checkbox"] {
  display: none;
}
#btn-a:checked ~ .hide {
  display: block
}
#btn-a:not(:checked) ~ .hide {
  display: none;
}
#btn-b:checked ~ .hide {
  display: block
}
  #btn-b:not(:checked) ~ .hide {
  display: none;
}

<input type="checkbox" id="btn-a">

  <label for= "btn-a" >
    <p><i class="fa fa-arrow-circle-down"></i><strong> Mostrar Mais A</strong></p>
  </label>

  <div class="hide">
    <p>Essas informações são de A.<p>
  </div>

  <input type="checkbox" id="btn-b">

  <label for= "btn-b" >
    <p><i class="fa fa-arrow-circle-down"></i><strong> Mostrar Mais B</strong></p>
  </label>

  <div class="hide">
    <p>Essas informações são de B.</p>
  </div>

Answer 2

because of the same id in the input

.myCollapse label {
    display: inline-flex;
}
.myCollapse label p strong {
    display: block;
}
.myCollapse label p strong+strong, .hide {
    display:none;
}
.myCollapse input[type="checkbox"]:checked ~ label p strong {
    display:none;
}
.myCollapse input[type="checkbox"]:checked ~ label p strong+strong{
    display:inline;
}
.myCollapse input[type="checkbox"]:checked ~ .hide {
    display:table;
}

<div class="myCollapse">
	
	<input type="checkbox" id="btn-a"/>
	<label for= "btn-a" >
		<p>
			<i class="fa fa-arrow-circle-down"></i>
			<strong> Mostrar Mais</strong>
			<strong> Mostrar Menos</strong>
		</p>
	</label>
                                   
    <div class="hide" id="hide1">
       <p>collapse 1<p>
    </div>
	
</div>

<div class="myCollapse">
	
	<input type="checkbox" id="btn-aa"/>
	<label for= "btn-aa" >
		<p>
			<i class="fa fa-arrow-circle-down"></i>
			<strong> Mostrar Mais</strong>
			<strong> Mostrar Menos</strong>
		</p>
	</label>
                                   
	
    <div class="hide" id="hide1">
       <p>collapse 2<p>
    </div>
	
</div>