Помогите задать новый класс тегу label посредством фокуса соседнему input

Помогите при фокусе на .request-input__item добавить .request__label новый класс .label__up посредством цикла forEach.

.request__form {
  display: grid;
  grid-template-columns: repeat(1, 314px 426px);
  gap: 58px 20px;
}

.request__input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 87px;
  background: rgba(10, 18, 62, 0.05);
  border-radius: 6px;
}

.request__input:not(:last-child) {
  margin-bottom: 20px;
}

.request__label {
  position: absolute;
  top: 29px;
  left: 12px;
  display: block;
  height: 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: #85899F;
  cursor: text;
}

.request-input__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: 0.5px;
  color: #0A123E;
  padding: 12px;
  border: 1px solid red;
  background: none;
}

.request-input__item:focus+.request__label {
  color: red;
}

.label__up {
  position: absolute;
  top: 2px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #85899F;
  transition: all 0.3s linear;
}

.request__area {
  width: 100%;
}

.request-textarea__item {
  width: 100%;
  height: 100%;
  resize: none;
  background: rgba(10, 18, 62, 0.05);
  border-radius: 6px;
  border: none;
  padding: 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #85899F;
}

.request__descr {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
  color: #85899F;
}

.request-block__submit {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.input__submit {
  width: 242px;
  height: 52px;
  background: #E90423;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #FFFFFF;
  cursor: pointer;
}
<form action="" class="request__form">
  <div class="column">
    <div class="request__input" tabindex="0">
      <label for="requestName" class="request__label">Ваше имя<span class="red">*</span></label>
      <input type="text" class="request-input__item" id="requestName" name="name" autocomplete="off">
    </div>
    <div class="request__input" tabindex="0">
      <label for="requestEmail" class="request__label">E-mail адрес<span class="red">*</span></label>
      <input type="email" class="request-input__item" id="requestEmail" name="email" autocomplete="off">
    </div>
    <div class="request__input" tabindex="0">
      <label for="requestPhone" class="request__label">Телефон<span class="red">*</span></label>
      <input type="text" class="request-input__item" id="requestPhone" name="phone" autocomplete="off">
    </div>
  </div>
  <div class="request__area">
    <textarea name="" id="requestArea" cols="30" rows="10" class="request-textarea__item" placeholder="Сообщение:"></textarea>
  </div>
  <p class="request__descr"><span class="red">(*)</span> - обязательные поля</p>
  <div class="request-block__submit">
    <input type="submit" class="input__submit" value="Отправить письмо">
  </div>
</form>


Ответы (2 шт):

Автор решения: Pilaton

Заметьте, код только добавляет класс label__up, но не убирает его, как вы и просили.

document.querySelectorAll('.request-input__item').forEach((input) => {
  input.addEventListener('focus', (ev) => {
    ev.target.previousElementSibling.classList.add('label__up');
  });
});
.request__form {
  display: grid;
  grid-template-columns: repeat(1, 314px 426px);
  gap: 58px 20px;
}

.request__input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 87px;
  background: rgba(10, 18, 62, 0.05);
  border-radius: 6px;
}

.request__input:not(:last-child) {
  margin-bottom: 20px;
}

.request__label {
  position: absolute;
  top: 29px;
  left: 12px;
  display: block;
  height: 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: #85899F;
  cursor: text;
}

.request-input__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: 0.5px;
  color: #0A123E;
  padding: 12px;
  border: 1px solid red;
  background: none;
}

.request-input__item:focus+.request__label {
  color: red;
}

.label__up {
  position: absolute;
  top: 2px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #85899F;
  transition: all 0.3s linear;
}

.request__area {
  width: 100%;
}

.request-textarea__item {
  width: 100%;
  height: 100%;
  resize: none;
  background: rgba(10, 18, 62, 0.05);
  border-radius: 6px;
  border: none;
  padding: 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #85899F;
}

.request__descr {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
  color: #85899F;
}

.request-block__submit {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.input__submit {
  width: 242px;
  height: 52px;
  background: #E90423;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #FFFFFF;
  cursor: pointer;
}
<form action="" class="request__form">
  <div class="column">
    <div class="request__input" tabindex="0">
      <label for="requestName" class="request__label">Ваше имя<span class="red">*</span></label>
      <input type="text" class="request-input__item" id="requestName" name="name" autocomplete="off">
    </div>
    <div class="request__input" tabindex="0">
      <label for="requestEmail" class="request__label">E-mail адрес<span class="red">*</span></label>
      <input type="email" class="request-input__item" id="requestEmail" name="email" autocomplete="off">
    </div>
    <div class="request__input" tabindex="0">
      <label for="requestPhone" class="request__label">Телефон<span class="red">*</span></label>
      <input type="text" class="request-input__item" id="requestPhone" name="phone" autocomplete="off">
    </div>
  </div>
  <div class="request__area">
    <textarea name="" id="requestArea" cols="30" rows="10" class="request-textarea__item" placeholder="Сообщение:"></textarea>
  </div>
  <p class="request__descr"><span class="red">(*)</span> - обязательные поля</p>
  <div class="request-block__submit">
    <input type="submit" class="input__submit" value="Отправить письмо">
  </div>
</form>

→ Ссылка
Автор решения: yar85

Когда соседний элемент всего один, "найти" его можно и без цикла, используя свойство previousElementSibling или nextElementSibling.
Я смог придумать только одно возможное (и хотя бы чуток разумное) применение forEach в данном случае - перебор названий событий:

const handler = evt => {
  const labelEl = evt.target.previousElementSibling;
  labelEl.classList.toggle('label__up', evt.type === 'focus');
};
const eventsToListen = ['focus', 'blur'];
for (const inpEl of document.querySelectorAll('.request-input__item'))
  eventsToListen.forEach(evt => inpEl.addEventListener(evt, handler));
.request__form {
  display: grid;
  grid-template-columns: repeat(1, 314px 426px);
  gap: 58px 20px;
}

.request__input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 87px;
  background: rgba(10, 18, 62, 0.05);
  border-radius: 6px;
}

.request__input:not(:last-child) {
  margin-bottom: 20px;
}

.request__label {
  position: absolute;
  top: 29px;
  left: 12px;
  display: block;
  height: 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: #85899F;
  cursor: text;
}

.request-input__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: 0.5px;
  color: #0A123E;
  padding: 12px;
  border: 1px solid red;
  background: none;
}

.request-input__item:focus+.request__label {
  color: red;
}

.label__up {
  position: absolute;
  top: 2px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #85899F;
  transition: all 0.3s linear;
}

.request__area {
  width: 100%;
}

.request-textarea__item {
  width: 100%;
  height: 100%;
  resize: none;
  background: rgba(10, 18, 62, 0.05);
  border-radius: 6px;
  border: none;
  padding: 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #85899F;
}

.request__descr {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
  color: #85899F;
}

.request-block__submit {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.input__submit {
  width: 242px;
  height: 52px;
  background: #E90423;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #FFFFFF;
  cursor: pointer;
}
<form action="#" class="request__form">
  <div class="column">
    <div class="request__input" tabindex="0">
      <label for="requestName" class="request__label">Ваше имя<span class="red">*</span></label>
      <input type="text" class="request-input__item" id="requestName" name="name" autocomplete="off">
    </div>
    <div class="request__input" tabindex="0">
      <label for="requestEmail" class="request__label">E-mail адрес<span class="red">*</span></label>
      <input type="email" class="request-input__item" id="requestEmail" name="email" autocomplete="off">
    </div>
    <div class="request__input" tabindex="0">
      <label for="requestPhone" class="request__label">Телефон<span class="red">*</span></label>
      <input type="text" class="request-input__item" id="requestPhone" name="phone" autocomplete="off">
    </div>
  </div>
  <div class="request__area">
    <textarea name="" id="requestArea" cols="30" rows="10" class="request-textarea__item" placeholder="Сообщение:"></textarea>
  </div>
  <p class="request__descr"><span class="red">(*)</span> - обязательные поля</p>
  <div class="request-block__submit">
    <input type="submit" class="input__submit" value="Отправить письмо">
  </div>
</form>

→ Ссылка