Есть у меня такой вот скрипт, дело в том что когда без заполнении данных нажимаю на Send подчеркиваются все 3 input-а (так и должно быть), но когда я ввожу внутри одного из троих input-ов у меня должно этот же input стать серым (как было вначале), но такого не происходит, происходит только тогда когда я ввожу второй input, плюс к этому когда input-и стали серыми (две input-и после ввода), когда нажимается send все 3 элемента становятся красными вместо одного (в которого не вводили ничего), есть ли какой ни будь способ исправить это кроме присвоении отдельных классов и отдельных функции?
css и html добавил всего лишь для вида, ошибка в jQuery
input{
outline:none;
border:1px solid #EDEDED;
}
.send{
width:155px;
height:23px;
background-color:#5089FC;
display: flex;
justify-content: center;
align-items: center;
color:white;
border-radius:20px;
margin-top: 15px;
font-size: 13px;
margin-bottom: 85px;
border:1px solid white;
}
.msg{
position: fixed;
z-index: 15;
left:0;
top:0;
display: none;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0.5);
width:100%;
height:100%;
}
.msg-sec{
width:60%;
height:30%;
background-color: white;
position: relative;
box-shadow: 0px 0px 15px 0px #BABABA;
display: flex;
justify-content: center;
align-items: center;
}
.msg-sec>p{
color:#5089FC;
}
.msg-sec>i{
position: absolute;
font-size: 30px;
right: -10px;
top:-10px;
color:red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<input type = "text" placeholder="" class = "input-adress input">
<input type="text" name="" placeholder = "+7" class = "input-numb input">
<input type="mail" name="" class = "input">
<div class = "msg">
<div class = "msg-sec">
<p>Данные отправлены</p>
<i class="fa fa-times-circle close-end"></i>
</div>
</div>
<div class = "send">Send</div>
$(".send").click(function(){
if($(".input").val() == ""){
$(".input").css("border", "red solid 1px");
}
else if($(".input").val() !== ""){
$('.alert').css('display','flex');
$(".input").val('')
$(".preview").attr("src","");
}
})
$(".close-end").click(function(){
$('.alert').css('display','none');
})
document.querySelectorAll(".input").forEach(el => el.oninput = noneRed);
function noneRed(){
if($(".input").val() !== ""){
$(".input").css("border", "#EDEDED solid 1px");
}
}