Bootstrap Modal HTML és CSS része, mi a gond?

2 modalt szeretnék használni két külön div részben, de hiába nyitja meg mindkettőt valamiért a második tartalma van az elsőben is, bárhogyan is írom..

Kód:

[code]<button id="ttsBtn">txt</button>

<div id="ttsModal" class="modal">

<div class="modal-content">

<div class="modal-header">

<h1>txt</h1>

</div>

<p class="stats">txt</p>

</div>

</div>

<script>

var modal = document.getElementById('ttsModal');

var btn = document.getElementById("ttsBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {

modal.style.display = "block";

}

span.onclick = function() {

modal.style.display = "none";

}

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

}

</script>

<h1 class="stats">txt</h1><hr>

<p class="stats">txt</p>

</div>

<div class="wstats">

<button id="wsBtn">txt</button>

<div id="wsModal" class="modal">

<div class="modal-content">

<div class="modal-header">

<span class="close">×</span>

<h1>txt</h1>

</div>

<p class="stats">txt</p>

</div>

</div>

<script>

var modal = document.getElementById('wsModal');

var btn = document.getElementById("wsBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {

modal.style.display = "block";

}

span.onclick = function() {

modal.style.display = "none";

}

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

}

</script>

[/code]

Két külön divben két különböző modal, id-ben amikor meghívom és a button-juk is, amivel meghívom. Mégis amit txt-vel jelöltem a szöveg mindkettőben ugyanaz.