Validation Message in JavaScript not displaying properly

Question

I am trying to show basic validation error on each row of input text oncheck of checkbox.Initially it is displaying error correctly below the 1st field but if i check 2nd checkbox in table its displaying message under 1st cell.

 <tbody id="co-storebody">                      
     <tr style="display:none;">
         <apex:repeat value="{!speCondscValues}" var="speConds" >
             <apex:variable var="index" value="{!index +1}" />
                 <tr>
                     <td>
                         <div>{!index}</div>
                     </td>
                     <td>
                         <div>{!speConds}</div>
                    </td>
                    <td>
                         <div><!--<apex:inputText styleClass="slds-input" style="" id="remarksVal"
                                                                                     />-->
                             <input type="text" class="slds-input" id="{!index}"/><br/>
                             <p id="error" style="color:red;"></p>
                             <!--<apex:inputHidden id="hdnRep2" value="{}"/>    -->
                         </div>

//js function This will be called on change of checkbox

Function enableRemarks(checkBox,inputId,speCond){
    var remarks = document.getElementById(inputId);//The id is dynamic
    checkObj = checkBox;
    inputValue = inputId;
    if(checkBox.checked){
        if(remarks.value == ''){
            alert('hihi');
            document.getElementById('error').innerHTML = remarks.validationMessage;  
        }
        specConds.push(speCond); 
    } else {
        specConds.splice(specConds.indexOf(speCond),1);
    }
}

Answer 1

document.getElementById('error') always finds the first instance of that on the page, you need to search by inputId.
You could try something like this:

 <input type="text" class="slds-input" id="{!index}"/><br/>
 <p id="{!index}error" style="color:red;"></p>

And then in your JS you could find the right error node like so:

var errorId = inputId + 'error';
document.getElementById(errorId).innerHTML = remarks.validationMessage;