On element click with the same class show hidden element using jquery-CodePudding

I have some forms with the same class settings-form-info and I need every time i click at the little edit button to display only the specific form's edit div. For example when I click the edit button next to Form 1 Info label I want to display only the Form 1 Edit form, and then when I click the cancel button at the bottom of the form to close this already open form. As it now when I click the edit button it displays all the forms. I used the jQuery .each function but it doesn't work.

What am I doing wrong ??

$('.settings-edit-icon').each(function() {
    $(this).click(function() {
        $(".settings-form-edit").removeClass('hide');
        $(".settings-form-info").addClass('hide');
 });
});

$('.btn-cancel').each(function() {
    $(this).click(function() {
        $(".settings-form-edit").addClass('hide');
        $(".settings-form-info").removeClass('hide');
 });
});

.form-label {
font-weight:bold;
margin-bottom:10px;

}

.form-control {
display:inline-block;
min-width:110px;
}

.form-row {
margin-bottom:10px;
}

.btn {
font-size:12px;
display:inline;
background: #0088cc;
color:#fff;
border-radius:4px;
padding:3px;
font-weight:bold;
cursor:pointer;
}

.btn-group {
margin-top:10px;
margin-bottom:20px;
}

.text-muted {
color:#888;
}

.hide {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div >    

<div >Form 1 Info <div >Edit</div> </div>

<div >
<div >Brand: </div> <div > Jeep </div>
</div>

<div >
<div >Model: </div> <div > Wrangler </div>
</div>

<div >
<div >Color: </div> <div > Red </div>
</div>

<div >
<div >Year: </div> <div > 2010 </div>
</div>

</div>

<div >    

<div >Form 1 Edit </div>

<div >
<div >Brand: </div> <input  placeholder="Car brand"> 
</div>

<div >
<div >Model: </div> <input  placeholder="Car model"> 
</div>

<div >
<div >Color: </div> <input  placeholder="Car color"> 
</div>

<div >
<div >Year </div> <input  placeholder="Construction year"> 
</div>

<div >
<div >Save</div> <div >Cancel</div>
</div>

</div>



<div >    

<div >Form 2 Info <div >Edit</div> </div>

<div >
<div >Brand: </div> <div > Apple </div>
</div>

<div >
<div >Model: </div> <div > iPhone </div>
</div>

<div >
<div >Color: </div> <div > Silver </div>
</div>

<div >
<div >Year: </div> <div > 2022 </div>
</div>

</div>

<div >    

<div >Form 2 Edit </div>

<div >
<div >Brand: </div> <input  placeholder="Phone brand"> 
</div>

<div >
<div >Model: </div> <input  placeholder="Phone model"> 
</div>

<div >
<div >Color: </div> <input  placeholder="Phone color"> 
</div>

<div >
<div >Year </div> <input  placeholder="Construction year"> 
</div>

<div >
<div >Save</div> <div >Cancel</div>
</div>

</div>

CodePudding user response：

First off I would like the obligatory mention that there are frameworks for binding and such that might prevent having to write both an edit and readonly section, to prevent redundancy.

That said, it is possible in your current html, with parent/sibling, etc, but right now the query is not contained to a specific element, so all edit/infos on the page will be found. A small change in html could make that easier/better maintainable, by putting a div around the info and edit divs that go together (in the example below I used a <div >) That way showing/hiding can be contained withing that div

const editButtonClass='.settings-edit-icon';

function showHideEditForm(button, editMode){
  const parent = $(button).closest('.settings-group');       
  $(".settings-form-edit", parent).toggleClass('hide',!editMode);
  $(".settings-form-info", parent).toggleClass('hide',editMode);
  
}

$('.settings-edit-icon').click(e =>showHideEditForm(e.target,true));
$('.btn-cancel').click(e =>showHideEditForm(e.target,false));

.form-label {
font-weight:bold;
margin-bottom:10px;

}

.form-control {
display:inline-block;
min-width:110px;
}

.form-row {
margin-bottom:10px;
}

.btn {
font-size:12px;
display:inline;
background: #0088cc;
color:#fff;
border-radius:4px;
padding:3px;
font-weight:bold;
cursor:pointer;
}

.btn-group {
margin-top:10px;
margin-bottom:20px;
}

.text-muted {
color:#888;
}

.hide {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div >
<div >    

<div >Form 1 Info <div >Edit</div> </div>

<div >
<div >Brand: </div> <div > Jeep </div>
</div>

<div >
<div >Model: </div> <div > Wrangler </div>
</div>

<div >
<div >Color: </div> <div > Red </div>
</div>

<div >
<div >Year: </div> <div > 2010 </div>
</div>

</div>

<div >    

<div >Form 1 Edit </div>

<div >
<div >Brand: </div> <input  placeholder="Car brand"> 
</div>

<div >
<div >Model: </div> <input  placeholder="Car model"> 
</div>

<div >
<div >Color: </div> <input  placeholder="Car color"> 
</div>

<div >
<div >Year </div> <input  placeholder="Construction year"> 
</div>

<div >
<div >Save</div> <div >Cancel</div>
</div>

</div>

</div>



<div >

<div >    

<div >Form 2 Info <div >Edit</div> </div>

<div >
<div >Brand: </div> <div > Apple </div>
</div>

<div >
<div >Model: </div> <div > iPhone </div>
</div>

<div >
<div >Color: </div> <div > Silver </div>
</div>

<div >
<div >Year: </div> <div > 2022 </div>
</div>

</div>

<div >    

<div >Form 2 Edit </div>

<div >
<div >Brand: </div> <input  placeholder="Phone brand"> 
</div>

<div >
<div >Model: </div> <input  placeholder="Phone model"> 
</div>

<div >
<div >Color: </div> <input  placeholder="Phone color"> 
</div>

<div >
<div >Year </div> <input  placeholder="Construction year"> 
</div>

<div >
<div >Save</div> <div >Cancel</div>
</div>

</div>

CodePudding user response：

It shows or hides every form because you're using .each(). That means it will perform the task for every single occurence of that class. What you wanna do is performing it only on the clicked ones parent.

You need to find the parent element and hide or show only the inputs in that category. Not all occurences of that class in general.