How to change the boolean value of one element when another is clicked in HTML via JavaScript?

Question

I'm trying to make a list such that each element can be edited by the user, since the list is created by user input. I am just starting to use JavaScript, and am still learning. What can I replace the pseudo-code portion with that would produce the desired effect?

HTML:

<li v-for="item in items" contenteditable="false" id="item">{{item}}
    <button id="editButton" contenteditable="false" onclick="edit()">Edit</button>

JS (pseudo-code):

function edit(){
    when "editButton" is clicked{
        "contenteditability" in "item" = true;
    }
}

Answer 1

Use the event to determine what button was clicked and select the parent. Than you can set the attribute

function edit(event) {
  var button = event.target,
    li = button.parentNode;
  li.setAttribute("contentEditable", true)
}

<ul>
  <li contenteditable="false"> AAAAA
    <button contenteditable="false" onclick="edit(event)">Edit</button></li>
  <li contenteditable="false"> BBBBB
    <button contenteditable="false" onclick="edit(event)">Edit</button></li>
  <li contenteditable="false"> CCCCC
    <button contenteditable="false" onclick="edit(event)">Edit</button></li>
</ul>