Get first or second (class) from parent

Question

I have this kind of code

<form class="row" id="testamentExecutor">

     <div id="executorsSection" class="form-row">

         <div class="executorSection form-row">
             <input type="text" name="firstname">
             ...
             <div class="alternativeExecutorSection visually-hidden">
                 <input type="text" name="firstname">
                 ...
             </div>
         </div>            

     </div>

</form>

Edit, I give more details on the problem

Structure of object

List<Executor> executors;

public class Executor {

    Person executor;
    Person alternative;
}

public class Person {

    String firstname;
    String lastname;
    String city;
}

I read local storage

let testamentExecutorStorage = localStorage.getItem("executorPersons");
let executorTable = JSON.parse(executorStorage);

for(let i=0;i<exectorSize;i++) {
    $("input[name=firstname]").eq(i).val(executorTable[i].executor.firstname);
    $("input[name=lastname]").eq(i).val(executorTable[i].executor.lastname);
    $("input[name=city]").eq(i).val(executorTable[i].executor.city);

    if(executorTable[i].alternative!=undefined){
        $("input[name=firstname]").eq(i+1).val(executorTable[i].alternative.firstname);
        $("input[name=lastname]").eq(i+1).val(executorTable[i].alternative.lastname);
        $("input[name=city]").eq(i+1).val(executorTable[i].alternative.city);
    }
}

It can have 2 block of executorSection alternativeExecutorSection is not mandatorry

Is there a way to get input (alternativeExecutorSection too) of executorSection from array?

alternativeExecutorSection is not visible, my current issue is put visible this section?

example, first executor don't have any value for alternative, so alternativeExecutorSection is hide.

but if second executor have a alternative, how i will see, put it visible in the loop?

Answer 1

const inputs = document.querySelectorAll(".executorSection input")
inputs.forEach(i => console.log("INPUT VALUE:", i.value))

     <div id="executorsSection" class="form-row">
         <div class="executorSection form-row">
             <input type="text" name="firstname" value="first">
             <div class="alternativeExecutorSection visually-hidden">
                 <input type="text" name="firstname"  value="second">
             </div>
         </div>            
     </div>