Javascript-форум - Наделал костылей, не могу разобратся

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Наделал костылей, не могу разобратся (https://javascript.ru/forum/dom-window/64856-nadelal-kostylejj-ne-mogu-razobratsya.html)

Ну давайте руссусолю, разжую.
В коде Script есть повторяющиеся блоки.
Надо сделать 1, я имею ввиду ту часть которая срабатывает при клике.
То что написал рони я не совсем понимаю.
У меня не получается, я знаю что есть простейшая фича как запросить ID элемента $(this).attr('id') но как заставить сопоставить этот ID с переменной var t3 = ' ';

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<style>
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;}
@-webkit-keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
  50% {opacity: 1;}
}
@keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
  50% {opacity: 1;}
}
.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn;}
#notifications {float: left;width: 100%;overflow: hidden;height: 100%;position: relative;}
#notifications-window {height: 400px;width: 700px;position: absolute;left: 50%;top: 20%;margin-left: -352px;}
#notifications-full{height: 300px;width: 530px;background-color: rgba(0,0,0,.5);position: fixed;margin-top: 10%;margin-left: -265px;z-index: 2;left: 50%;top: 10%;}
</style>
<div id="btn1">Кнопка 1</div>
<div id="btn2">Кнопка 2</div>
<div id="btn3">Кнопка 3</div>
<div id="notifications"><div id="notifications-window"></div></div>
<script>
$(window).load(function () {
	function resize(){
		$('#notifications').height(window.innerHeight - 50);
	}
	$( window ).resize(function() {
		resize();
	});
	resize();
	function refresh_close(){
		$('.close').click(function(){
			$(this).parent().fadeOut(200);
		});
	}
	refresh_close();
	var t1 = '<div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text">содержимое 1</div></div>';
	var t2 = '<div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text">содержимое 2</div></div>';
	var t3 = '<div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text">содержимое 3</div></div>';
	$('#btn1').click(function(){
		$("#notifications-full").remove();
		$("#notifications").append(t1);
		$("#notifications-full").addClass('animated ' + 'zoomIn');
		refresh_close();
	});
	$('#btn2').click(function(){
		$("#notifications-full").remove();
		$("#notifications").append(t2);
		$("#notifications-full").addClass('animated ' + 'zoomIn');
		refresh_close();
	});
	$('#btn3').click(function(){
		$("#notifications-full").remove();
		$("#notifications").append(t3);
		$("#notifications-full").addClass('animated ' + 'zoomIn');
		refresh_close();
	});
});
</script>
</body>
</html>

Sk1LL,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<style>
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;}
@-webkit-keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);  }
  50% {opacity: 1;}
}
@keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
  50% {opacity: 1;}
}
.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn;}
#notifications {float: left;width: 100%;overflow: hidden;height: 100%;position: relative;}
#notifications-window {height: 400px;width: 700px;position: absolute;left: 50%;top: 20%;margin-left: -352px;}
#notifications-full{height: 300px;width: 530px;background-color: rgba(0,0,0,.5);position: fixed;margin-top: 10%;margin-left: -265px;z-index: 2;left: 50%;top: 10%;}
#notifications-full{
  display: none;
}

</style>
<div class="btn">Кнопка 1</div>
<div class="btn">Кнопка 2</div>
<div class="btn">Кнопка 3</div>
<div id="notifications"><div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text"></div></div></div>
<script>
$(window).load(function () {
  function resize(){
    $('#notifications').height(window.innerHeight - 50);
  }
  $( window ).resize(resize).trigger('resize');
    $('.close').click(function(){
      $(this).parent().fadeOut(200);
    });
  var arr = ['содержимое 1','содержимое 2','содержимое 3'];
  var btn = $('.btn')
  btn.click(function(){
    var i = btn.index(this);
    $("#notifications-full-text").html(arr[i]);
    $("#notifications-full").css({display: "block"}).addClass('animated ' + 'zoomIn');

  });
});
</script>
</body>
</html>

рони, вот это от души спасибо!"!