'On element click with the same class show hidden element using jquery

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 class="settings-form-info">    

<div class="form-label">Form 1 Info <div class="settings-edit-icon btn">Edit</div> </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <div class="form-control"> Jeep </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <div class="form-control"> Wrangler </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <div class="form-control"> Red </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Year: </div> <div class="form-control"> 2010 </div>
</div>

</div>

<div class="settings-form-edit hide">    

<div class="form-label">Form 1 Edit </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <input class="form-control" placeholder="Car brand"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <input class="form-control" placeholder="Car model"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <input class="form-control" placeholder="Car color"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Year </div> <input class="form-control" placeholder="Construction year"> 
</div>

<div class="btn-group">
<div class="btn">Save</div> <div class="btn btn-cancel">Cancel</div>
</div>

</div>



<div class="settings-form-info">    

<div class="form-label">Form 2 Info <div class="settings-edit-icon btn">Edit</div> </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <div class="form-control"> Apple </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <div class="form-control"> iPhone </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <div class="form-control"> Silver </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Year: </div> <div class="form-control"> 2022 </div>
</div>

</div>

<div class="settings-form-edit hide">    

<div class="form-label">Form 2 Edit </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <input class="form-control" placeholder="Phone brand"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <input class="form-control" placeholder="Phone model"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <input class="form-control" placeholder="Phone color"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Year </div> <input class="form-control" placeholder="Construction year"> 
</div>

<div class="btn-group">
<div class="btn">Save</div> <div class="btn btn-cancel">Cancel</div>
</div>

</div>

html jquery

Solution 1:^[1]

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 class="settings-group">) 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 class="settings-group">
<div class="settings-form-info">    

<div class="form-label">Form 1 Info <div class="settings-edit-icon btn">Edit</div> </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <div class="form-control"> Jeep </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <div class="form-control"> Wrangler </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <div class="form-control"> Red </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Year: </div> <div class="form-control"> 2010 </div>
</div>

</div>

<div class="settings-form-edit hide">    

<div class="form-label">Form 1 Edit </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <input class="form-control" placeholder="Car brand"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <input class="form-control" placeholder="Car model"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <input class="form-control" placeholder="Car color"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Year </div> <input class="form-control" placeholder="Construction year"> 
</div>

<div class="btn-group">
<div class="btn">Save</div> <div class="btn btn-cancel">Cancel</div>
</div>

</div>

</div>



<div class="settings-group">

<div class="settings-form-info">    

<div class="form-label">Form 2 Info <div class="settings-edit-icon btn">Edit</div> </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <div class="form-control"> Apple </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <div class="form-control"> iPhone </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <div class="form-control"> Silver </div>
</div>

<div class="form-row">
<div class="form-control text-muted">Year: </div> <div class="form-control"> 2022 </div>
</div>

</div>

<div class="settings-form-edit hide">    

<div class="form-label">Form 2 Edit </div>

<div class="form-row">
<div class="form-control text-muted">Brand: </div> <input class="form-control" placeholder="Phone brand"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Model: </div> <input class="form-control" placeholder="Phone model"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Color: </div> <input class="form-control" placeholder="Phone color"> 
</div>

<div class="form-row">
<div class="form-control text-muted">Year </div> <input class="form-control" placeholder="Construction year"> 
</div>

<div class="btn-group">
<div class="btn">Save</div> <div class="btn btn-cancel">Cancel</div>
</div>

</div>

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Me.Name
Solution 2	Morice

'On element click with the same class show hidden element using jquery

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]