Как применить класс к разным блокам при клике?
Как при клике на кнопку "загрузить файл" у каждой кнопки загружалась свой файл. Сейчас на какую бы кнопку не нажал все применяется к первому. Спасибо
const inputFiles = document.querySelectorAll('.input-file');
if (inputFiles) {
const inputFileClose = document.querySelector('.input-file-close');
const inputFileName = document.querySelector('.input-file-name');
let pattern = /((?:.(?!\(\d+\)))+.)(?:\(\d+\))?\..+/
inputFiles.forEach(inputFile => {
inputFile.addEventListener("change", function (e) {
inputFileName.textContent = this.files[0].name.match(pattern)[1]
inputFileName.classList.add("_active")
inputFileClose.classList.add("_active")
});
inputFileClose.addEventListener("click", function (e) {
inputFileName.classList.remove("_active")
inputFileClose.classList.remove("_active")
});
});
}
.left-form-calculator__files {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px 0 0 0;
margin: -10px -5px
}
.left-form-calculator__file-inputs {
position: relative;
min-width: 175px;
height: 53px;
padding: 10px 5px 10px 0;
margin: 0 0 0 5px
}
.left-form-calculator__file-input-value {
position: relative;
padding: 10px 5px
}
.left-form-calculator__input-file-name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
border: none;
border-radius: 10px;
background-color: #f8f8fa;
font-size: 14px;
line-height: 1.2857142857;
color: #91919b;
padding: 15px 20px;
display: none
}
.left-form-calculator__input-file-name._active {
display: block
}
.left-form-calculator__input-file-close{
position: absolute;
top: 2px;
right: 2px;
display: none;
cursor: pointer
min-width: 18px;
height: 18px;
border-radius: 50%;
background: #f5912d;
color: #fff;
font-size: 12px;
padding: 6px;
-webkit-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all .3s ease 0s
}
.left-form-calculator__input-file-close:hover::before {
background: #af671e
}
.left-form-calculator__input-file-close._active {
display: block
}
.left-form-calculator__file {
display: none
}
.left-form-calculator__label-file {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 15px 20px;
border: 1px solid #e1e1eb;
border-radius: 10px;
background: #fff;
border-radius: 10px;
cursor: pointer;
-webkit-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all .3s ease 0s
}
.left-form-calculator__label-file:hover {
border: 1px solid #f5912d
}
.left-form-calculator__label-icon {
width: 20px;
height: 20px;
margin: 0 10px 0 0
}
.left-form-calculator__label-text {
white-space: nowrap;
font-weight: 400;
font-size: 14px;
line-height: 1.2857142857;
color: #91919b
}
<div class="left-form-calculator__files">
<div class="left-form-calculator__file-inputs">
<input class="left-form-calculator__file input-file" type="file" name="file" id="input-file">
<label class="left-form-calculator__label-file" for="input-file">
<div class="left-form-calculator__label-text">Загрузить файл</div>
</label>
</div>
<div class="left-form-calculator__file-input-value">
<div class="left-form-calculator__input-file-name input-file-name" type="text" id="filename"></div>
<div class="left-form-calculator__input-file-close input-file-close _icon-close">x</div>
</div>
</div>
<div class="left-form-calculator__files">
<div class="left-form-calculator__file-inputs">
<input class="left-form-calculator__file input-file" type="file" name="file" id="input-file">
<label class="left-form-calculator__label-file" for="input-file">
<div class="left-form-calculator__label-text">Загрузить файл</div>
</label>
</div>
<div class="left-form-calculator__file-input-value">
<div class="left-form-calculator__input-file-name input-file-name" type="text" id="filename"></div>
<div class="left-form-calculator__input-file-close input-file-close _icon-close">x</div>
</div>
</div>
Источник: Stack Overflow на русском