Affecting javascript Divs

Question

I have two div with #bodyProduct, and inside each one has a div with a div with a #btn-extende.

To div father product has a height fixed with overflow, hiding the rest of its contents and the button extende is just to extend this div for a height auto, to show all the content, but the problem is that when I put the system to work by clicking on the first btn-extende, It works, but when I click on the second btn, rather than extend to div to which he is inserted, he extends the first div with the #bodyProduct.

How do I affect only the div father of btn tight?

<div id="bodyProduct">
     <div id="btn-extende">

     </div>
</div>

<div id="bodyProduct">
     <div id="btn-extende">

     </div>
</div>



<style>
      #bodyProduct{
        position: relative;
        width: 960px;
        height: 295px;
        margin: 20px 60px;
        display: block;
        overflow: hidden;
      }
      #btn-extende{
        z-index: 9999;
        position: absolute;
        width: 35px;
        height: 18px;
        background-color: #555;
        bottom: 6px;
        right: 6px;
        overflow: hidden;
      }
</style>

$('btn-extende').on('click', function(){
     $('#bodyProduct').css('height', 'auto');
 });

Answer 1

Only use id for a single element on the page. For a list of repeated elements that will have the same styles, use class.

Transform the ids #bodyProduct and #btn-extende in classes: .bodyProduct and .btn-extende. Besides being the correct form, it will not cause any formatting problem since all elements with these classes will have the same styles.

As you are using jQuery, use the code below to expand the div click on the "button":

$('.btn-extende').on('click', function(){
   $(this)
   .parent()
   .css('height', 'auto');
});

Behold:

$('.btn-extende').on('click', function(){
   $(this)
   .parent()
   .css('height', 'auto');
});

.bodyProduct{
  position: relative;
  width: 400px;
  /* width: 960px; */
  height: 20px;
  margin: 20px 60px;
  display: block;
  overflow: hidden;
}
.btn-extende{
  z-index: 9999;
  position: absolute;
  width: 35px;
  height: 18px;
  background-color: #555;
  bottom: 6px;
  right: 6px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bodyProduct">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   <div class="btn-extende">
   </div>
</div>

<div class="bodyProduct">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   <div class="btn-extende">
   </div>
</div>

Answer 2

One thing I realized is that when you use the id to find your reference in Javascript, jQuery -or the browser itself- treats only one element, that is, the first with that id specific.

To resolve this issue I used the attribute class buttons, so that both are recognized by the script.

Instead of searching for the "parent" element by id within the event click (what would find the first element even if it were outside), I put the reference of the parent element by the attribute parentNode through the object of the event scope (this).

See in Codepen

$('.btn-extende').on('click', function(event){
  var parent = $(this.parentNode)
  
  let height = parent.css('height')
  
  parent.css('height',
    (height === '40px') ? 'auto' : '40px'
  )
 });

 #bodyProduct{
   position: relative;
   width: 300px;
   height: 40px;
   margin: 20px 60px;
   display: block;
   overflow: hidden;
}

.btn-extende{
  z-index: 9999;
  position: absolute;
  width: 35px;
  height: 18px;
  background-color: #555;
  bottom: 6px;
  right: 6px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bodyProduct">
  <div class="btn-extende"></div>
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi ut odio imperdiet gravida. Mauris vitae pretium velit, at pulvinar ante. Suspendisse eget mollis metus, ut convallis elit. Vestibulum ac purus et lectus rhoncus vulputate. Vivamus ornare efficitur odio in mollis. Quisque suscipit interdum magna, nec feugiat nibh volutpat ut. In id posuere ante. Morbi fermentum, quam ut aliquet elementum, mi metus rhoncus orci, sed tristique urna neque eu diam. Maecenas vehicula mauris eu pulvinar maximus. Donec in nisl velit. Sed vestibulum dui ut finibus aliquet. Fusce pulvinar felis arcu, at suscipit nisi aliquet in. Quisque pharetra nunc sit amet sodales interdum.
</div>

<div id="bodyProduct">
  <div class="btn-extende"></div>
  
  Sed magna ipsum, sagittis vehicula metus et, pharetra rhoncus neque. Vivamus leo libero, rutrum ac egestas vitae, volutpat eu justo. Quisque tempor convallis odio, vel feugiat tellus blandit semper. Etiam non tempus orci, non finibus orci. Vivamus sollicitudin nibh nec orci fermentum condimentum. Suspendisse vel viverra felis, vel placerat ante. Phasellus ornare sagittis sollicitudin. Etiam interdum feugiat ornare. Duis suscipit justo in aliquam porttitor. Morbi ut mi et velit pretium ornare vitae vitae dolor. Donec nibh felis, elementum nec hendrerit id, cursus sed ante. Aenean tempor tempor purus, id consequat nunc commodo sit amet.
</div>