JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row Errorreport" style="display:none;">     
  <div>Error id 1</div>   
</div>
<div class="row">
 <div><input class="autoausgabe form-control " id="ID1" onChange="calculate(this);"></div>
</div>
<div class="row Errorreport" style="display:none;">     
  <div>Error id 2</div>   
</div>
<div class="row">
 <div><input class="autoausgabe form-control " id="ID3" onChange="calculate(this);"></div>
</div>

JavaScript

function calculate(){

    var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
    var letter = /[a-zA-Z ]+/;

error1 = false;
error2 = false;
error3 = false;

var input = ['ID1','ID2'];
var element;

for(i=0;i <element.length; i++{
element = document.getElementById(input[i]);

if(regex.test(element.value) && letter.test(element.value)){
element.style.border = '4px solid red';

//Here's where i'm stuck
//i'm trying to SHOW the previous Div with class(Errorreport) if the input is wrong 

//$(element).prev('.Errorreport').show(); doesn't work

}
}

}