Some one please help me with this


#1

I am writing a web page for my ideas
I am adding a Modal to the images on the page
the problem is that only one of the images is doing the effect even though they all share the same class and ID
here is the HTML code for one of the segments of the page

<div class="main_2">
				<svg height="700" width="600" id="part_1">
					<rect x="0" y="10" rx="0" ry="0" width="420" height="510" style="fill:rgb(36,36,36);stroke-width:1;stroke:rgb(36,36,36)" />
				<svg height="1000" width="2000" class="tag_2">
					<!-- <rect x="10" y="10" rx="10" ry="10" width="1450" height="750" style="fill:rgba(255, 255, 255, 0.281);stroke: width 5;stroke:rgb(255, 255, 255, 0.281)" /> -->
					<rect x="645" y="100" rx="0" ry="0" width="120" height="50" style="fill:rgba(255, 255, 255, 0);stroke-width:3;stroke:rgba(65, 64, 64, 0.999)" stroke-dasharray="8,4" d="M5 40 l215 0"/>
					<text x="655" y="130" class="tag_text_2_1" >root tipping </text>
					
					<!--this is a system
					that I am proposing
					to help the plants
					make it in space
					by feeding their roots-->

				</svg>
					<img src="to be drawn.jpg" alt="test image" id="myImg" style="width:100%;max-width:350px" class="img_1"> <!--height="400" width="350"-->
					<!-- The Modal -->
					<div id="myModal" class="modal">
					  <span class="close">&times; </span>
					  <img class="modal-content" id="img01">
					  <div id="caption"> </div>
					</div>
					<script>
						// Get the modal
						var modal = document.getElementById('myModal');

						// Get the image and insert it inside the modal - use its "alt" text as a caption
						var img = document.getElementById('myImg');
						var modalImg = document.getElementById("img01");
						var captionText = document.getElementById("caption");
						img.onclick = function(){
							modal.style.display = "block";
							modalImg.src = this.src;
							captionText.innerHTML = this.alt;
						}

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

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

here is the CSS for those parts

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

note: I am using the example from W3 schools for this but have to apply it to multiple elementsin total 4 though that number will expand over time