title: How to clear list before loading-Bootstarp 4
body: <p>I created list group as following :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
     &lt;html lang="en"&gt;
     &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
     
      &lt;title&gt;test&lt;/title&gt;
  
      &lt;!--bootstrap scripts--&gt;
     &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
      &lt;!--end bootsripts--&gt;
       &lt;/head&gt;
       
    &lt;body&gt;
      &lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#s"&gt;Default&lt;/button&gt;
  
  
  
            &lt;div class="modal" tabindex="-1" role="dialog" id="s"&gt; 
                 &lt;div class="modal-dialog modal-lg modal-dialog-scrollable" &gt;
                  &lt;div class="modal-content"&gt;
                    &lt;div class="modal-body"&gt;
                     
                     
                      &lt;div class="row"&gt;
                      
                         &lt;div class="col-6 col-sm-6 col-xl-6"&gt;
                            &lt;h5 class="text-danger"&gt;Main Catagories&lt;/h5&gt;    
                          &lt;div class="list-group"style="width:100px;border:none"&gt;
            
                          &lt;a href="#vehical" class="list-group-item list-group-flush border-bottom"  data-toggle="collapse" style="text-decoration:none"&gt;Vehical&lt;/a&gt;
                           &lt;a href="#property" class="list-group-item list-group-flush border-bottom" data-toggle="collapse" style="text-decoration:none"&gt;Property&lt;/a&gt;                                                                                      
                            &lt;/div&gt;
                           &lt;/div&gt;
  
                                 &lt;div class="col-6"&gt;
                                 
                &lt;div class="list-group list-group-flush" style="width:100px;border:none" &gt;
  
               &lt;div class="list-group collapsing" id="vehical" data-toggle="collapse" style="width:100px;border:none" &gt;
                 &lt;a href="#" class="list-group-item list-group-item-action"&gt;Vehical1&lt;/a&gt;
                 &lt;a href="#" class="list-group-item list-group-item-action"&gt;Vehical2&lt;/a&gt;
                 &lt;a href="#" class="list-group-item list-group-item-action"&gt;Vehical3&lt;/a&gt;
                 &lt;a href="#" class="list-group-item list-group-item-action"&gt;Vehical4&lt;/a&gt;
                 &lt;a href="#" class="list-group-item list-group-item-action"&gt;Vehical5&lt;/a&gt;
                 &lt;/div&gt;
  
                              
              &lt;div class="list-group collapsing" id="property" data-toggle="collapse" style="width:100px;border:none"&gt; 
  
                  &lt;a href="#" class="list-group-item list-group-item-action"&gt;Property1&lt;/a&gt;
                  &lt;a href="#" class="list-group-item list-group-item-action"&gt;Property2&lt;/a&gt;
                  &lt;a href="#" class="list-group-item list-group-item-action"&gt;Property3&lt;/a&gt;
                  &lt;a href="#" class="list-group-item list-group-item-action"&gt;Property4&lt;/a&gt;
                  &lt;a href="#" class="list-group-item list-group-item-action"&gt;Property5&lt;/a&gt;
                    &lt;/div&gt;
  
                      &lt;/div&gt;
                      
                        &lt;/div&gt;
  
                            &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;/div&gt;
                        
                        
  
                            &lt;/div&gt;
                            
            &lt;!--Java Scripts--&gt;
             &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
            &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt;
            &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"&gt;&lt;/script&gt;
            &lt;!--end of java scripts--&gt;
                            &lt;/body&gt;
                            
                            &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When click Main Category Sub category will display on next column.but it display as <a href="https://i.stack.imgur.com/YOwuv.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  <p>I need when I click new main category button ,It shows sub category in right pannel which is related to Main Category.How ever after that when click another main category button both sub categories shows in right panel but I want shows only subcategory items related to which is click main category.I use bootstrap 4 version</p>