Grab Div’s internal element on the side

Question

I’m trying to make sure that by clicking a button, the contents of div next door is editable.
Better visualizing the code:

<div id="nome" class="container">
    <div class="col-10">
        <p class="editar" contenteditable="false">Digite o nome</p>
    </div>
    <div class="col-2">
        <button>Editar</button>
    </div>
    <div id="Sobrenome" class="container">
        <div class="col-10">
            <p class="editar" contenteditable="false">Digite o Sobrenome</p>
        </div>
        <div class="col-2">
            <button>Editar</button>
        </div>
    </div>
</div>

Currently jQuery is like this, but when clicking the button both contents are selected.

$("button").click(function() {      
    if ($("div > .editar").attr("contenteditable") == "false") { 
        $("div > .editar").attr("contenteditable", "true");
        $("div > .editar").focus().text(""); 
        $("div > .editar").addClass("selecionado"); 
        $(this).text("Concluído"); 
    } else { 
        $("div > .editar").attr("contenteditable", "false"); 
        $("div > .editar").blur(); 
        $("div > .editar").removeClass("selecionado"); 
        $(this).text("Editar"); 

        if ($("div > .editar").is(":empty")) { 
            $("div > .editar").text("Digite o nome"); 
        }; 
    };
});

I’m not finding a way to use it. Closest which I think would be a possible salvation to assign the button clicked to the div element next to it, since both have the same parent (the #name or #surname).

Answer 1

The problem you’re facing is more HTML semantics than the function of click with Jquery. You can do it this way:

<div id="nome" class="container">
<div class="col-10">
    <label>Nome</label>
    <input type="text" class="inputs" value="Fulano" disabled/>
</div>
<div id="Sobrenome" class="container">
<div class="col-10">
    <label>Sobrenome</label>
    <input type="text" class="inputs" value="da Silva" disabled/>
</div>
<div class="col-2">
    <button id="editar">Editar</button>
</div>

$("#editar").on('click', function(event){
   event.preventDefault();
   $('.inputs').prop("disabled", false);
});

Follows example functional

Answer 2

Thank you to all who have helped me, and to those who are having the same difficulty, here is the solution I have found.

$(this).siblings()

Used to catch the div sister of the element and then enter the paragraph.

Grateful.