title: Bootstrap : Accordion Row : Change expand-collapse icons when there are MULTIPLE ROWS
body: <p>I am having one table with some accordion rows.
  I want to change expand-collapse icons on row expand-collapse
  I got success for 1 row. But when I try it for multiple rows, my code works badly and clashing with other rows</p>
  
  <p>Please help me out if anybody is having solution</p>
  
  <pre><code>var flag = true;
  $('.togglebutton').click(function() {
          if (flag == true) {
              this.getElementsByTagName('img')[0].src = "../images/minus.png";
              flag = false;
          } else {
              this.getElementsByTagName('img')[0].src = "../images/plus.png";
              flag = true;
          }
      })
  
  &lt;tr class="clickable apply-max-width"&gt;
                              &lt;td class="table-tr1-td1 togglebutton"&gt;&lt;b aria-hidden="true" data-toggle="collapse" data-target="#accordion"&gt;&lt;img src="../images/plus.png"/&gt;&lt;/b&gt;&lt;/td&gt;
  
                              &lt;td&gt;abcd@gmail.com&lt;/td&gt;
                              &lt;td colspan="2"&gt;WD100165&lt;/td&gt;
                              &lt;td&gt;2/1/2017&lt;/td&gt;
                              &lt;td&gt;YES&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td colspan="2"&gt;
                                  &lt;div id="accordion" class="accordion collapse data-found"&gt;
  
                                      &lt;table class="table table-striped data-table-inner-disabled div-found"&gt;
                                          &lt;thead&gt;
                                              &lt;tr&gt;
                                                  &lt;th&gt;&lt;/th&gt;
                                                  &lt;th class=""&gt;Application&lt;/th&gt;
                                                  &lt;th class=""&gt;App Role&lt;/th&gt;
                                                  &lt;th&gt;Workflow Status&lt;/th&gt;
  
                                              &lt;/tr&gt;
                                          &lt;/thead&gt;
                                          &lt;tbody&gt;
                                              &lt;tr&gt;
                                                  &lt;td class="application-User-inv"&gt;&lt;img src="../images/delete_1.png" class="img-responsive" /&gt;&lt;/td&gt;
                                                  &lt;td class="application-User-inv"&gt;Portal&lt;/td&gt;
                                                  &lt;td&gt;User&lt;/td&gt;
                                                  &lt;td&gt;Pending Approval&lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td class="application-User-inv"&gt;&lt;img src="../images/delete_1.png" class="img-responsive" /&gt;&lt;/td&gt;
                                                  &lt;td class="application-User-inv"&gt;SSR&lt;/td&gt;
                                                  &lt;td&gt;User&lt;/td&gt;
                                                  &lt;td&gt;Provisioned&lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
  
                                  &lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;
  
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="clickable apply-max-width"&gt;
                              &lt;td class="table-tr1-td1 togglebutton"&gt;&lt;b aria-hidden="true" data-toggle="collapse" data-target="#accordion2"&gt;&lt;img src="../images/plus.png"/&gt;&lt;/b&gt;&lt;/td&gt;
  
                              &lt;td&gt;abcd@gmail.com&lt;/td&gt;
                              &lt;td colspan="2"&gt;WD100165&lt;/td&gt;
                              &lt;td&gt;2/1/2017&lt;/td&gt;
                              &lt;td&gt;YES&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td colspan="2"&gt;
                                  &lt;div id="accordion2" class="accordion collapse data-found"&gt;
  
                                      &lt;table class="table table-striped data-table-inner-disabled div-found"&gt;
                                          &lt;thead&gt;
                                              &lt;tr&gt;
                                                  &lt;th&gt;&lt;/th&gt;
                                                  &lt;th class=""&gt;Application&lt;/th&gt;
                                                  &lt;th class=""&gt;App Role&lt;/th&gt;
                                                  &lt;th&gt;Workflow Status&lt;/th&gt;
  
                                              &lt;/tr&gt;
                                          &lt;/thead&gt;
                                          &lt;tbody&gt;
                                              &lt;tr&gt;
                                                  &lt;td class="application-User-inv"&gt;&lt;img src="../images/delete_1.png" class="img-responsive" /&gt;&lt;/td&gt;
                                                  &lt;td class="application-User-inv"&gt;Portal&lt;/td&gt;
                                                  &lt;td&gt;User&lt;/td&gt;
                                                  &lt;td&gt;Pending Approval&lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td class="application-User-inv"&gt;&lt;img src="../images/delete_1.png" class="img-responsive" /&gt;&lt;/td&gt;
                                                  &lt;td class="application-User-inv"&gt;SSR&lt;/td&gt;
                                                  &lt;td&gt;User&lt;/td&gt;
                                                  &lt;td&gt;Provisioned&lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
  
                                  &lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;
  
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  </code></pre>