Butonla iframe yükleme çoklu buton çalışmıyor

Merhaba

Butonla iframe yüklemeye çalışıyorum ve başarılı bir şekilde yükleniyor, ama çoklu buton yapamıyorum sadece ilk buton çalışıyor bunu nasıl çözerim.

html bu şekilde

<div id="iframe_container"></div>
<a href="javascript:;" id="button" data-id="/test">Test</a>

<div id="iframe_container"></div>
<a href="javascript:;" id="button" data-id="/foo">Test 2</a>

javascript

var button = document.querySelector("#button");
var iframeContainer = document.querySelector("#iframe_container");

button.addEventListener("click", function () {
  var dataId = button.getAttribute("data-id");
  if (dataId != null && dataId != undefined) {
    iframeContainer.innerHTML = "";
    iframeContainer.innerHTML =
      '<iframe src="' + dataId + '" title="" style="width:100%;"></iframe>';
  }
});

ikinci buton çalışmıyor yardımlarınızı bekliyorum.

Selam hocam şuan ki işlemleriniz de sadece ilk butonu gördüğü için ikincisi çalışmıyor aşağıdaki yöntem işinizi görür.

Click eventi yerine bir fonksiyon oluşturdum. Butonlara da id yerine onclick eventi ile kendi değerlerini fonksiyona gönderdim bu şekilde sorunsuz çalışıyor.

Not: href içine <b></b> ekleniyor editör kaynaklı sanırım silmeyi unutmayın

<div id="iframe_container"></div>
<a href="javascript:;" onclick="iframefunc(this)" data-id="https://google.com">Test</a>
 
<div id="iframe_container"></div>
<a href="javascript:;" onclick="iframefunc(this)" data-id="https://facebook.com">Test 2</a>

var iframeContainer = document.querySelector("#iframe_container");
function iframefunc(e){
  var dataId = e.getAttribute("data-id");
  if (dataId != null && dataId != undefined) {
    iframeContainer.innerHTML = "";
    iframeContainer.innerHTML =
      '<iframe src="' + dataId + '" title="" style="width:100%;"></iframe>';
  }
}

Hocam çok teşekkürler evet dediğiniz gibi çalışıyor ama bir sıkıntı, ben butonları farklı yerlere yerleştirdim ama iki butonda ilk div altına açılıyor

<divid="iframe_container"></div>

class ile değiştirdim ama olmadı yine ilk divi seçti, bunu nasıl çözebiliriz ?

Buda aynı sebepten. queryselector seçicisine all ekleyerek tüm elementleri seçtirip butonlarda da iframe id vererek istenen div içine ekleme yapabilirsiniz. Bu arada fonksiyon dışında kalan div seçicisini fonksiyona dahil ettik.
Örnek:

<div id="iframe_container"></div>
<a href="javascript:;" onclick="iframefunc(this)" data-iframe="0" data-id="https://google.com">Test</a>
 
<div id="iframe_container"></div>
<a href="javascript:;" onclick="iframefunc(this)" data-iframe="1" data-id="https://facebook.com">Test 2</a>

function iframefunc(e){
  
  var dataId = e.getAttribute("data-id");
  var iframeId = e.getAttribute("data-iframe");

  var iframeContainer = document.querySelectorAll("#iframe_container")[iframeId];
  if (dataId != null && dataId != undefined) {
    iframeContainer.innerHTML = "";
    iframeContainer.innerHTML =
      '<iframe src="' + dataId + '" title="" style="width:100%;"></iframe>';
  }
}

Hocam gayet güzel çalışıyor ellerinize sağlık, ben blogger'da yorum formunu butonla yüklemeyi deniyorum, blogger yorum formu iframe ile çalışıyor.
ilk buton yorum formunu yüklüyor yazıya normal bir şekilde yorum yazmak için ,
ikinci buton ise yapılan yoruma cevap butonu, ilk butonda src sabit kalıyor,
cevap butonlarında src her yoruma göre değişiyor, benim yapmak istediğim iframe her cevapla butonunun altında açılması, sadece bunu yapamadım.

Yorumların döngüsüne dahil etmeniz lazım 2. buton ve divi

Halletim hocam, ilgi ve alakan için çok teşekkür ederim.
Kıymetli vaktinizden benim için harcadınız ve uğraştınız minnettarım size....

Rica ederim hocam iyi çalışmalar.