Show current selective div only and hide other divs using jquery - html

Question

I have two divs [one is upper | second is lower]. Both can fetch data from database and make accordingly number of divs. lower div is default hidden. I want to show lower div when I click upper div. jquery code that i make is here. Need your help.
Note. Show only current active lower div. All other lower divs must hidden. to do this
<!---upper div section--->
<?php
$id=1;
while ($comp_post_info=mysqli_fetch_array($query))
{
?>
<div class="container-fluid">
<div class="row">
<div class="upperdiv container-fluid mb-5">
<div class="row">
<div class="col-md-1 pdl-3">
<i class="fa fa-circle"></i>
</div>
<div class="col-md-11">
<div class="container-fluid">
<div class="row jlist" id="addbg">
<div class="col-md-4">
<img src="/my_brands/brand.png" alt="" class="cust-em">
<h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['coun'] ?>
<p><small>Location</small></p>
</h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['saly'] ?>
<p><small> Saly</small></p>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----lowerdiv--->
<div class="lowerdiv container-fluid hideme" id="mydiv" >
<div class="row pt-4 padl-5">
<h6>Other Prepositions <small>for gle</small></h6>
</div>
<div class="row">
<div class="col-md-11 offset-md-1">
<div class="container-fluid">
<div class="row sub_lowerdiv pt-2">
<div class="col-md-4">
<i class="fa fa-circle"></i>
<h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['count'] ?>
<p><small>Location</small></p>
</h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['saly'] ?>
<p><small>Saly</small></p>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
** <script>
$(document).ready(function(){
$(".upperdiv").on("click",function(){
var currentselect = $(this).('.lowerdiv');
$(".lowerdiv").not(currentselect).hide();
currentselect.show();
});
});
</script> **
enter code here

Answer 1

Use closest to find the parent (I have added parent class .parent-div) and then use nextAll to find the first lowerdiv.
See the Snippet below:
$(document).ready(function(){
$(".upperdiv").on("click",function(){
var currentselect = $(this).closest(".parent-div").nextAll('.lowerdiv').first(); /* Look I've added find */
$(".lowerdiv").not(currentselect).hide();
currentselect.show();
});
});
.lowerdiv{
display: none;
margin-left: 15px;
}
.upperdiv{
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 1
</div>
</div>
</div>
<div class="lowerdiv">
Lower 1
</div>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 2
</div>
</div>
</div>
<div class="lowerdiv">
Lower 2
</div>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 3
</div>
</div>
</div>
<div class="lowerdiv">
Lower 3
</div>