We have package boxes on our page and was wondering how to target and slidedown/toggle the ". p-more-info"  on each div on button (". showmore") click? Any insights will be helpful.

1. <div class="package-box">
2. 
   
3.   <div class="package-wrap">
4.         <h1>Package 1</h1>
5.         <div class="p-more-info" style="display: none">
6.             <p class="p-features">FEATURES</p>
7.                Lorem ipsum dolor sit amet
8.             <a href="#" class="btn btn-orange">GET THIS PACKAGE</a>
9.         </div>   
10. 
    
11.   </div>
12. 
    
13.   <button class="showmore">SHOW MORE INFO <i class="fa fa-chevron-down"></i></button>   
14. 
    
15. </div>
16. 
    
17. 
    
18. <div class="package-box">
19. 
    
20.   <div class="package-wrap">
21.         <h1>Package 2</h1>
22.         <div class="p-more-info" style="display: none">
23.             <p class="p-features">FEATURES</p>
24.                Lorem ipsum dolor sit amet
25.             <a href="#" class="btn btn-orange">GET THIS PACKAGE</a>
26.         </div>   
27. 
    
28.   </div>
29. 
    
30.   <button class="showmore">SHOW MORE INFO <i class="fa fa-chevron-down"></i></button>   
31. 
    
32. </div>

Thanks much..