Is there a way to have a function display text to a single div if the div has duplicates?

Question

so in Javascript I am trying to display the text "halfWayDown" when My hP variable is equal or less than itself divided by 2. I am using a querySelectorAll and a "for loop" on essentially all of my elements, so I don't needlessly have to duplicate my code. Accordingly, for all of my code I am able to increment an individual variable at a time though there are others with the same class name; with the exception of my halfWayDown "div". It displays the text per "div" with the same class name. I am pretty new to programming and am self-taught. I am eager to learn, so any help is greatly appreciated. Here is my relevant code.

var characterNameDisplay=document.querySelectorAll(".character-name-display")
console.log(characterNameDisplay);

let inputNameEl=document.querySelectorAll(".input-name-el")
console.log(inputNameEl)


let nameSubmitBtn=document.querySelectorAll(".name-submit-btn");

let hpDeductionBtn=document.querySelectorAll(".hp-deductin-btn")
console.log(hpDeductionBtn)

let inputHpDeductionEl=document.querySelectorAll(".input-hp-deduction-el")
console.log(inputHpDeductionEl)


let hpSubmitBtn=document.querySelectorAll(".hp-submit-btn")
console.log(hpSubmitBtn)

let inputHpEl=document.querySelectorAll(".input-hp-el")

let hP=0;

let healthPointsDisplay=document.querySelectorAll(".healthpoints-display")
console.log(healthPointsDisplay)

let hPDeductinBtn=document.querySelectorAll(".hp-deductin-btn")
console.log(hPDeductinBtn);

let inputHpDeduction=document.querySelectorAll(".input-hp-deduction-el")
console.log(inputHpDeduction)

let activeBtn=document.querySelectorAll(".active-btn")
console.log(activeBtn)

let button=document.querySelectorAll(".button")
console.log(button);

let resetButton=document.getElementById("resetbutton")
console.log(resetButton);

let iniativeBtn=document.querySelectorAll(".iniativebtn")
console.log(iniativeBtn)

let inativeRollEl=document.querySelectorAll(".iniative-roll-el")
console.log(inativeRollEl)

let rollDisplay=document.querySelectorAll(".roll-display")
console.log(rollDisplay)

let subGrid=document.querySelectorAll(".subgrid")
console.log(subGrid)

let halfWayDownText=document.querySelectorAll(".halfWayDown")
halfWayDownText = Array.from(halfWayDownText)
console.log(halfWayDownText);                       

                
let intEl="";

let initalHp=0;

for (let i=0;i<characterNameDisplay.length;i++)

    nameSubmitBtn[i].addEventListener("click",function(){
        characterNameDisplay[i].textContent=inputNameEl[i].value
        clearInput()
});

for( let i=0;i<healthPointsDisplay.length;i++)
    console.log(healthPointsDisplay[i]);

for( let i=0; i<inativeRollEl.length;i++)
    console.log(inativeRollEl[i]);

for( let i=0;i<inativeRollEl.length;i++)
    console.log(inativeRollEl[i])

for (let i=0;i<iniativeBtn.length;i++)
    iniativeBtn[i].addEventListener("click",function(){
        rollDisplay[i].innerText=inativeRollEl[i].value
    })

for (let i=0;i<hpSubmitBtn.length;i++){
    hpSubmitBtn[i].addEventListener("click",function(){  
hP=0;       
healthPointsDisplay[i].innerText= hP + parseInt(inputHpEl[i].value) + " Healthpoints";
hP=parseInt(inputHpEl[i].value)
initalHp=parseInt(inputHpEl[i].value)
console.log(initalHp)

clearHpInput();
})};



function clearHpInput(){
    for ( let i=0;i<inputHpEl.length;i++)
    inputHpEl[i].value="";
console.log();
}

// THE CODE BELOW IS WHERE I AM RUNNING INTO PROBLEMS

for (let i=0;i<hpDeductionBtn.length;i++) {hPDeductinBtn[i].addEventListener("click",function(){ 
        healthPointsDisplay[i].innerText= hP - parseInt(inputHpDeduction[i].value) + " Healthpoints";
        hP=hP - parseInt(inputHpDeduction[i].value);
        console.log(parseInt(inputHpDeduction[i].value))
        if(hP<=initalHp/2){
        for (let i=0;i<halfWayDownText.length;i++){
            halfWayDownText[i].innerText="Halfway Down"};
        }

        clearDeductionInput();
    })}


    
    function clearDeductionInput(){
        for( let i=0;i<inputHpDeduction.length;i++)
    inputHpDeduction[i].value="";   
    }


for (let i=0;i<inputNameEl.length;i++){function clearInput(){
            inputNameEl[i].value=""}};

    for(let i=0;i<subGrid.length;i++)

    for (let i=0;i<activeBtn.length;i++){activeBtn[i].addEventListener("click",function(){
    activeBtn[i].style.backgroundColor="brown"
    activeBtn[i].innerText="Inactive"
    for(let i=0;i<subGrid.length;i++){
    
    }

    resetButton.addEventListener("click",function(){
        activeBtn[i].style.backgroundColor="green";
        activeBtn[i].innerText="Active";
        subGrid[i].style.borderColor="green";


    })

    })};

for (let i=0;i<activeBtn.length;i++){activeBtn[i].addEventListener("click",function(){
        subGrid[i].style.borderColor="brown";
        console.log()
})}



<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/style.css">
    <h1><!--D&D DM Tool--><h1>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

    <div id="header-container">
        <h1 id="header"></h1>
    </div>
    
    <div id="grid"> 
            <div id="subgrid" class="subgrid" >
                <div class="halfWayDown"></div>
        <div class="character-name-display">Name</div>
        <button class="name-submit-btn">Submit</button><input type="text" class="input-name-el" placeholder="Name">
        <br>    
        <div class="roll-display">Iniative</div><button class="iniativebtn">submit</button><input type="number" class="iniative-roll-el" placeholder="Iniative Roll">
        <br>        
        <br>
        <div class="healthpoints-display">Healthpoints</div>
        <button class="hp-submit-btn">Submit</button><input type="number" class="input-hp-el" placeholder="Total HealthPoints">
        <br>
        <button class="hp-deductin-btn">Submit</button><input type="number" class="input-hp-deduction-el" placeholder="Damage">
        <br>
        <button class="active-btn" class="button">Active</button>
        <br>        
        </div>

    </body><button id="resetbutton">Reset</button>
    <script src="mainCopy.js"></script>
    </html>

Thank you.