title: Editable bootstrap table row on button click using jquery
body: <p>I'm trying to edit the values of bootstrap table on button click using Jquery. I've taken reference from this post <a href="https://stackoverflow.com/questions/23572428/making-row-editable-when-hit-row-edit-button">making row editable</a>
  and it works exactly fine.The only problem that I am having is to double click the button to enter the edit mode.Here is my code snippet </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-js lang-js prettyprint-override"><code>$('.editbtn').click(function () {
                var currentTD = $(this).parents('tr').find('td');
                if ($(this).html() == 'Edit') {
                    currentTD = $(this).parents('tr').find($("td").not(":nth-child(1)"));
                    $.each(currentTD, function () {
                        $(this).prop('contenteditable', true).css({
                          'background':'#fff',
                          'color':'#000'
  
                      })
                    });
                } else {
                   $.each(currentTD, function () {
                        $(this).prop('contenteditable', false).removeAttr("style");
                    });
                }
      
                $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
                if ($(this).html() == 'Save'){
                  $(this).prop('contenteditable',false)
                }
      
            });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;table id="tableone" class="table table-striped table-dark table-bordered" border="1"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th scope="col"&gt;Date&lt;/th&gt;
                    &lt;th scope="col"&gt;Name&lt;/th&gt;
  
                    &lt;th scope="col"&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
         
  &lt;tbody&gt;
                 &lt;tr&gt;
                    &lt;td&gt;21st August&lt;/td&gt;
                    &lt;td&gt;abc&lt;/td&gt;
                   
                         &lt;td  contenteditable="false"&gt;&lt;button type="button"class="btn btn-primary editbtn"&gt;Edit&lt;/button&gt;
                      &lt;button type="button" class="btn btn-danger"&gt;
                      Delete
                       &lt;/button&gt;&lt;/td&gt;
                 &lt;/tr&gt;
              &lt;tr&gt;
                    &lt;td&gt;21st August&lt;/td&gt;
                    &lt;td&gt;abc&lt;/td&gt;
               
                        &lt;td  contenteditable="false"&gt;&lt;button type="button" class="btn btn-primary editbtn" &gt;
                       Edit
                       &lt;/button&gt;
                      &lt;button type="button" class="btn btn-danger"&gt;
                      Delete
                       &lt;/button&gt;&lt;/td&gt;
                 &lt;/tr&gt;  
                 &lt;tr&gt;
                    &lt;td&gt;21st August&lt;/td&gt;
                    &lt;td&gt;abc&lt;/td&gt;
           
                      &lt;td  contenteditable="false"&gt;&lt;button type="button" class="btn btn-primary editbtn" &gt;
                       Edit
                       &lt;/button&gt;
                      &lt;button type="button" class="btn btn-danger"&gt;
                      Delete
                       &lt;/button&gt;&lt;/td&gt;
                 &lt;/tr&gt;  &lt;tr&gt;
                    &lt;td&gt;21st August&lt;/td&gt;
                    &lt;td&gt;abc&lt;/td&gt;
                
  
                    &lt;td  contenteditable="false"&gt;&lt;button type="button" class="btn btn-primary editbtn"&gt;
                       Edit
                       &lt;/button&gt;
                      &lt;button type="button" class="btn btn-danger"&gt;
                      Delete
                       &lt;/button&gt;&lt;/td&gt;
                 &lt;/tr&gt;
              &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here I've disabled editing the data from one column.As you can see,when we click the edit button in first row,only a single click is required but for remaining rows,multiple click is necessary.And after multiple clicks,it would be in edit mode on single click until refreshed the page.I don't know where I missed.I would be grateful for your help. </p>