HTML-Javascript - Problem mit Modals

Buttons:
<button id="prodplus" class="plusbtn" onclick="prodmodal()">+</button>  
<button id="mwpplus" class="plusbtn" onclick="mwpmodal()">+</button>  
...
Modal Inhalt:
<!-- Produktion Modal -->
<div id="ProduktionModal" class="modal">  
	<form action="" method="post">  
<!-- Modal content -->
		<div class="modal-content">  
			<span class="close">&times;</span>  
			<label for="produktion">Produktion:  
				<textarea class="textarea" id="produktion" name="produktion" type="text" required></textarea>  
			</label>
			<input class="Button" type="submit" value="speichern">  
		</div>
		<input type="hidden" name="aktion" value="speichern">  
	</form>
</div> 

Modal Funktion:
<script>
	function prodmodal(){
		// Get the modal
		var modal = document.getElementById("ProduktionModal");  

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

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

		// When the user clicks on 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>
<script>
	function mwpmodal(){
		// Get the modal
		var modal = document.getElementById("MWPModal");  

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

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

		// When the user clicks on 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>
...

Modal CSS:

/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  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.4); /* Black w/ opacity */
	}

	/* Modal Content/Box */
	.modal-content {
	  background-color: #fefefe;
	  margin: 15% auto; /* 15% from the top and centered */
	  padding: 20px;
	  border: 1px solid #888;
	  width: 80%; /* Could be more or less, depending on screen size */
	}

	/* The Close Button */
	.close {
	  color: #aaa;
	  float: right;
	  font-size: 28px;
	  font-weight: bold;
	}

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