javascript - Save button of modal changes the text of current tab as well as previously clicked tab

Question

I want to have tabs, that when clicked on their respective edit-icon, opens a modal to edit its content.

The problem I am facing, is, that when one opens the editor of one tab, closes it without saving, and then opens the editor of another, and then saves it, it is saved on both the previous one and the current one.

I want it to only save to the currently opened tab, and cancel the changes made when clicking on 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"> &times; </span>
    <textarea class="textBox"></textarea>
    <button class="save"> SAVE </button>
  </div>
</div>

question from:https://stackoverflow.com/questions/65897508/save-button-of-modal-changes-the-text-of-current-tab-as-well-as-previously-click

Answer 1

You need to move your event handlers out of the click and have a placeholder for the box clicked

const boxes = document.querySelector('.boxes');
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.closeModal');
const save = document.querySelector('.save');
const textBox = document.querySelector('.textBox');
let currentPara;
boxes.addEventListener('click', (event) => {
  if (event.target.matches('.icon')) {
    currentPara = event.target.previousElementSibling;
    textBox.value = currentPara.textContent;
    modal.style.display = "block";
  }
})

save.addEventListener('click', () => {
  currentPara.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>
<div class="modal">
  <div class="modalContent">
    <span class="closeModal"> &times; </span>
    <textarea class="textBox"></textarea>
    <button class="save"> SAVE </button>
  </div>
</div>