I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab.
The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor for another tab and save it, the changes are applied to both the previous and current tabs.
My goal is for the changes to only be saved to the currently open tab and for any unsaved changes to be canceled when clicking the close button.
var boxes = document.querySelector('.boxes');
var modal = document.querySelector('.modal');
var closeModal = document.querySelector('.closeModal');
var save = document.querySelector('.save');
boxes.addEventListener('click', (event) => {
if (event.target.matches('.icon')) {
var para = event.target.previousElementSibling;
var textBox = document.querySelector('.textBox');
textBox.value = para.textContent;
modal.style.display = "block";
save.addEventListener('click', () => {
para.textContent = textBox.value;
modal.style.display = "none";
});
closeModal.addEventListener('click', () => {
modal.style.display = 'none';
})
}
})* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
margin-bottom: 20px;
padding: 20px;
background-color: rgb(73 191 214);
width: 200px;
}
.box .para {
color: white;
font-family: arial;
font-size: 18px;
}
.box .icon {
font-size: 30px;
color: white;
cursor: pointer;
}
.modal {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.055);
display: none;
}
.modalContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.textBox {
resize: none;
padding: 10px;
font-family: arial;
font-size: 18px;
outline: none;
width: 100%;
height: 150px;
border: 2px solid #ececec;
}
.save {
display: block;
margin: 20px auto;
padding: 10px 15px;
background-color: rgb(247, 42, 121);
color: white;
font-size: 16px;
font-family: arial;
outline: none;
border: none;
cursor: pointer;
}
.closeModal {
float: right;
font-size: 35px;
color: gray;
cursor: pointer;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="boxes">
<div class="box">
<p class="para"> This is first text for editing . </p>
<i class="fas fa-edit icon"></i>
</div>
<div class="box">
<p class="para"> This is second text for editing . </p>
<i class="fas fa-edit icon"></i>
</div>
<div class="box">
<p class="para"> This is third text for editing . </p>
<i class="fas fa-edit icon"></i>
</div>
<div class="box">
<p class="para"> This is fourth text for editing . </p>
<i class="fas fa-edit icon"></i>
</div>
<div class="box">
<p class="para"> This is fifth text for editing . </p>
<i class="fas fa-edit icon"></i>
</div>
</div>
<div class="modal">
<div class="modalContent">
<span class="closeModal"> × </span>
<textarea class="textBox"></textarea>
<button class="save"> SAVE </button>
</div>
</div>