How to have multiple buttons of same id value and when click on any button the pop-up should come?

Question

I have multiple buttons having same element id, But when I click on first button, the pop-up is coming. If I click on any other buttons pop-up will not come. How can I make it possible.

<form method="post" action="trial.php">

<!-- Trigger/Open The Modal -->
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="asd"></input>
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="assign"></input>

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Assign Project</p>
        <hr style="height:0.25px; background:black;"></hr>
        <div class="container">
          <div class="row">
              <p class="col-md-10"><br/>Assign Project to a Existing Team : 
              <a class="btn btn-primary" id="ExistingTeam" value="Existing Team" href="google.com">Existing Team</a></p>
          </div>
          <div class="row">
              <p class="col-md-10"><br/>Create a new Team and Assign Project : 
              <a class="btn btn-primary" id="CreateTeam" value="Create Team" href="google.com">Create Team</a></p>  
          </div>
        </div>
    </div>
</div>
</form>

These is the javascript I am using for pop-up

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Answer 1

You should have unique ids for your HTML elements. In order you achieve that you want the common practice is to use a pseudo css class prefixed with js, in order for this to be evident to the readers of your code that this class is used in js script.

var buttons = document.getElementsByClassName('jsBtn');
for(var i=0; i<buttons.length; i++){
    buttons[i].addEventListener("click", function(){ console.log("Hello"); })
}

<input type="button" id="btn1" class="jsBtn" value="button1"/>
<input type="button" id="btn2" class="jsBtn" value="button2"/>

A better approach it would be to place all the buttons in a div and assign the pseudo css class to this div.

var btnContainer = document.getElementsByClassName("jsBtnContainer");
btnContainer[0].addEventListener("click", function() { console.log("Hello"); });

<div class="jsBtnContainer">
    <input type="button" id="btn1" class="jsBtn" value="button1"/>
    <input type="button" id="btn2" class="jsBtn" value="button2"/>
</div>

Doing so, you would have only one event listener instead of n listeners, where n is the number of buttons in your document. Fewer listeners means better performance on the loading of the page, since fewer listeners would have to be registered.

The above technique is called DOM Event Delegation.

Answer 2

When you assign the same ID to more than one element this scenario happens. Actually when you try to call the element using id code only calls the first element.

So to remove this error there are multiple solutions:

1. Use the class name and assign the event through the loop
2. Use different IDs
3. Access the elements using the tag and check whether its id is the id assigned by you.

This page has mentioned everything which you require to get over your problem.