Javascript QuerySelector is not working for a for with [i]

Question

I'm trying to take the value of each comment in a data form using QuerySelector. There is a button "add" that allows to show another and increment the name of the element by +1. So for example first comment has the name "comment0", second, "comment1", etc ....

Here is the html I'm trying to use the javascript in:

            <li id="duplicate" class="list-group-item">
                <select name="acc<?php echo $count; ?>" class="form-control col-md-6 duplicate-select">
                    <option  value="choix">-- Choisir --</option>
                    <option class="duplicate-option" value="kitpieton">Kit piéton</option>
                    <option class="duplicate-option" value="chargeur">Chargeur</option>
                    <option class="duplicate-option" value="batterie">Batterie</option>
                    <option class="duplicate-option" value="capot">Capot batterie</option>
                    <option class="duplicate-option" value="sdcard">Carte SD</option>
                    <option class="duplicate-option" value="box">Emballage</option>
                    <option class="duplicate-option" value="autre">Autre (préciser)</option>
                </select>
                <input name="comment<?php echo $count; ?>" type="text" class="form-control duplicate-input" class="cold-md-6" placeholder="Détails"/>
                <div class="btn-group btn-toggle" data-toggle="buttons">
                    <label class="btn btn-sm btn-default">
                        <input type="radio" name="check<?php echo $count; ?>" class="btn duplicate-check" value="1">
                        <span class="glyphicon glyphicon-ok"></span>
                    </label>
                    <label class="btn btn-sm btn-primary active">
                        <input type="radio" name="check<?php echo $count; ?>" class="btn duplicate-check" value="0" checked >
                        <span class="glyphicon glyphicon-remove"></span>
                    </label>
                </div>
                <div class="clearfix"></div>
            </ul> 
            </li>   

As for the javascript, This querySelector that takes one name attribute works :

var form = document.forms[1];  
var selectElement = form.querySelector('input[name="comment0"]');
var selectedValue = selectElement.value;

alert(selectedValue);

But in a for it doesn't recognize the [i] :

var count = +$('.count').val() +1 ;
for(i=0;i<count; i++)
{

    var form = document.forms[1];  
    var selectElement = form.querySelector('input[name="comment[i]"]');
    var selectedValue = selectElement.value;
    alert(selectedValue);
}

If you can give me the solution by Javascript, I'd really appreciate it, still i'm ears open to see how you can do it with JQUERY.

I tried also using querySelectorAll, it doesn't show the value of the elements when I do it with 3 comments type=text and 2 of them have values:

var queryAll = document.querySelectorAll('#duplicate input');
var queryAllLength = queryAll.length;
alert(queryAll[1].value); // shows 1    

alert(queryAllLength); // shows 3

when I change var queryAll = document.querySelectorAll('#duplicate input'); to var queryAll = document.querySelectorAll('#duplicate .duplicate-input'); , both alert shows nothing but when it's var queryAll = document.querySelectorAll('#duplicate .form-control'); , queryAll shows nothing but queryAllLength shows 2 ...

Answer 1

change this line:

var selectElement = form.querySelector('input[name="comment[i]"]');

To:

var selectElement = form.querySelector('input[name="comment'+i+'"]');