How to access dynamically created div elements in Javascript/ jquery?

Question

This is my code. Here hostname is an array. For every array element, my loop will be iterating. if the users selects yes, then it should show the hideconf div elements. if it is no, then it should hide the elements. But only for first iteration it is working. from second iteration, the elements of first div tag are getting shown and hidden. The problem is with the id. So, how can i achieve my objective.

<% hostname.forEach(function(data){ %>
 <input class="form-control" id="fw" name="fwchange" type="radio" value="true" onclick="showconf()" /></label>
  <input class="form-control" id="fw" name="fwchange" type="radio" value="true" onclick="noshowconf()" /></label>
  <div class="hideconf" style="display:none">
  <input type="text" class="form-control" id="fwchangedetail" name="fwchangedetail"  placeholder="Configuration Change Details"/>
  <input type="text" class="form-control" id="fwchangedetail1" name="fwchangedetail1"  placeholder="Configuration Change Details"/>

 <input type="text" class="form-control" id="fwchangedetail2" name="fwchangedetail2" placeholder="Configuration Change Details"/>
  <input type="text" class="form-control" id="fwchangedetail3" name="fwchangedetail3"  placeholder="Configuration Change Details"/></div>
    <%}) %>
    <script>
    function showconf(){
     document.getElementsByClassName('hideconf').style.display="block";}
     function noshowconf(){
     document.getElementsByClassName('hideconf').style.display="none";}
    </script>

Answer 1

try this good luck:)

<% hostname.forEach(function(data, index){ %>
 <input class="form-control" id="fw" name="fwchange" type="radio" value="true" onclick=`showconf(${index})` /></label>
  <input class="form-control" id="fw" name="fwchange" type="radio" value="true" onclick=`noshowconf(${index})` /></label>
  <div class="hideconf" style="display:none">
  <input type="text" class="form-control" id="fwchangedetail" name="fwchangedetail"  placeholder="Configuration Change Details"/>
  <input type="text" class="form-control" id="fwchangedetail1" name="fwchangedetail1"  placeholder="Configuration Change Details"/>

 <input type="text" class="form-control" id="fwchangedetail2" name="fwchangedetail2" placeholder="Configuration Change Details"/>
  <input type="text" class="form-control" id="fwchangedetail3" name="fwchangedetail3"  placeholder="Configuration Change Details"/></div>
    <%}) %>
    <script>
    function showconf(index){
     document.getElementsByClassName('hideconf')[index].style.display="block";}
     function noshowconf(index){
     document.getElementsByClassName('hideconf')[index].style.display="none";}
    </script>

=======UPDATE=========

Cuz document.getElementsByClassName return a NodeList Array. In your function u just changed the first element's style.

// the index is the NodeList's index
document.getElementsByClassName('hideconf')[index].style.display