Multiple Button have inside foreach loop but only first button can be clickable. How to make all the buttons can click?

Question

<? foreach(.........){                      

<select id = "RelationshipSelect" name = 'RelationshipSelect' disabled>
                                //some codes implement                                                          
                        </select>`enter code here`

                        <input type = 'text' value = "<? echo ... ?>" id = "affectedSystems_0" name = 'affectedSystems_0' readonly> 

                                    <input type = "button" id = 'findAffectedSystems_0' value = 'Find' disabled>
                                        <input type = "button" id = 'removeAffectedSystems_0' value = 'Remove' disabled>


        <?}?>   

as showing in the photo, CI Relationship Field data are retrieve using foreach loop.

In javascript file, I call the "findAffectedSystems_0" as find button id, but it only works on first row of "Find" button. How should I do to get all the buttons can be clickable.

document.getElementById("findAffectedSystems_0").addEventListener("click", function (){
              //some codes work

});

Answer 1

you should do like this

foreach ($variable as $key => $value) { // $variable should be array
        ?>
        <input type="button" class="common-class" name="findAffectedSystems_<?php echo $key ?>" id="findAffectedSystems_<?php echo $key ?>">
        <input type="button" class="common-class" name="removeAffectedSystems_<?php echo $key ?>" id="removeAffectedSystems_<?php echo $key ?>">
        <?php
    }

if you need separate action on each btn then go with id attribute otherwise for common action you should use class attribute