title: Set specific div contenteditable to true on button click using Javascript (MVC)
body: <p>I am populating divs with data in it by use of a foreach :</p>
  
  <pre><code>@foreach (var item in Model.EmploymentDetailsList)
                      {
                          &lt;li&gt;
                              &lt;i class="fa fa-user bg-aqua"&gt;&lt;/i&gt;
                              &lt;div class="timeline-item"&gt;
                                  &lt;span class="time"&gt;&lt;i class="fa fa-clock-o"&gt;&lt;/i&gt; Current&lt;/span&gt;
                                  &lt;h3 class="timeline-header"&gt;@item.Position at &lt;a href="@item.EmploymentCompanyWebsite"&gt;@item.EmploymentCompany&lt;/a&gt;&lt;/h3&gt;
                                  &lt;div id="page-wrapper"&gt;
                                      &lt;section&gt;
                                          &lt;div id="editor" class="diveditor timeline-body"&gt;
                                              &lt;input type="hidden" class="pkiEmploymentDetailID" value="@item.pkiEmploymentDetailID" /&gt;
                                              @Html.Raw(item.PositionDetails)
                                          &lt;/div&gt;
                                      &lt;/section&gt;
                                  &lt;/div&gt;
                                  &lt;div class="timeline-footer"&gt;
                                      &lt;button id="editorBtn" type="button" class="edit-button btn btn-primary btn-xs"&gt;Edit&lt;/button&gt;
                                      @*&lt;a class="btn btn-primary btn-xs"&gt;Edit&lt;/a&gt;*@
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
  
                                              &lt;!-- timeline time label --&gt;
                          &lt;li class="time-label"&gt;
                              &lt;span class="bg-red"&gt;
                                  @item.StartDate
                              &lt;/span&gt;
                          &lt;/li&gt;
                      &lt;!-- /.timeline-label --&gt;
                      }
  </code></pre>
  
  <p>And I have the following JS that I am trying to use to set the specific div's contenteditable to true, based on the button clicked in that div :</p>
  
  <pre><code>&lt;script&gt;
          //var editorBtn = document.getElementById('editorBtn');
          //var element = document.getElementById('editor');
  
          $('.edit-button').on('click', function () {
          //editorBtn.addEventListener('click', function (e) {
              // e.preventDefault();
              //alert("Button Clicked");
  
              if ($('.diveditor').attr('contenteditable', 'false')) {
                  // Disable Editing
                  //This code runs when you click Save
                  alert("Button Editable works");
                  //alert(element.innerHTML);
  
                  //TODO: Do Ajax call to save content to  Database
                  var ProfileDetails =
                 {
                     "EmploymentDetails": element.innerHTML
                 };
  
                  $.ajax({
                      url: '/Profile/Save_Employment/',
                      data: JSON.stringify(ProfileDetails),
                      datatype: 'json',
                      type: 'POST',
                      contentType: 'application/json; charset=utf-8',
                      success: function (data) {
                          $('.diveditor').attr('contenteditable', 'false');
                          $('.edit-button').innerHTML = 'Edit';
                          // You could save any changes here.
                      }
                  });
  
  
              } else {
                  //This code runs when you click Edit
                  $('.diveditor').attr('contenteditable', 'true');
                  $('.edit-button').innerHTML = 'Save';
                  $('.diveditor').focus();
              }
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>So as you will see, all the Div's and buttons have the same names and I would like to edit only the specific Div that I click the button on(the edit button) - I have done something similar using a webgrid by using the class name.</p>
  
  <p>Currently it sets focus to the last Div and not the one I want. It also does not change the button from "Edit" to "Save".</p>
  
  <p>Is there a better way of doing this ? Or can someone possibly help me with what I am doing wrong.</p>