Javascript-форум - Подскажите в чем ошибка?

Два элемента div. по нажатию на один из них, второму присваивается display:none; По второму нажатию, див снова отображается. Не могу найти ошибку в коде. Помогите пожалуйста!

<div class="show" name= "shw">
        <img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
    </div>
        <div class="main" style="display: block;" name="mn">
            
                <div  class="pocketchoose" >
                 
                      <div  class="chosen"  rel='1' name="pct">
                        <img src="//" alt="1" >
                        <p>1</p>
                      </div>
                 </div>
            
                <div  class="pocketchoose" >
                      <div  class="chosen"  rel='2' name="pct">
                        <img src="//" alt="2">
                        <p>2</p>
                      </div>
                </div>
                <div class="pocketchoose" >
                      <div  class="chosen"  rel='3' name="pct">
                        <img src="//" alt="3">
                        <p>3</p>
                      </div>
                </div>
            </div>
        
        
                <div class="show" name="shw">
                    <img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
                </div>
                    <div class="main" style="display: block;" name="mn">
                        <div id="initials">
                            <div class="img_init">
                                 <img id="jimg" src="in_jacket.png">
                                    <input type="text" class="inits" placeholder="input_text" value="">
                            </div>
                        </div>
                    </div>

function SH() {
  
    var self = $(this);
    console.log(self.next('div').css('display'));
    var flag = true;     
    
    
    if (flag) {
        self.next('div').css('display','none');
        var flag = true;
        console.log(flag);
    }
    else {
        self.next('div').css('display','block');
        var flag = true;
        console.log(flag);
    }
    
    
}
   $('.show').on('click',SH);
$('.showButton').on('click',SH);

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .main{ display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function () { var $show = $('.show'); $show.on('click', function () { var self = $(this); $show.not(self).next('div').hide(); self.next('div').toggle(); } ); } ) </script> </head> <body> <div class="show" name= "shw"> <img src="box.png" class="showButton"><p id="shb">Show/Hide</p> </div> <div class="main" name="mn"> <div class="pocketchoose" > <div class="chosen" rel='1' name="pct"> <img src="//" alt="1" > <p>1</p> </div> </div> <div class="pocketchoose" > <div class="chosen" rel='2' name="pct"> <img src="//" alt="2"> <p>2</p> </div> </div> <div class="pocketchoose" > <div class="chosen" rel='3' name="pct"> <img src="//" alt="3"> <p>3</p> </div> </div> </div> <div class="show" name="shw"> <img src="box.png" class="showButton"><p id="shb">Show/Hide</p> </div> <div class="main" name="mn"> <div id="initials"> <div class="img_init"> <img id="jimg" src="in_jacket.png"> <input type="text" class="inits" placeholder="input_text" value=""> </div> </div> </div> </body> </html>