i have this code that shows different servers to watch a videos on

the code:

<div class="container-disable">
<ul class="tabs-ul nav-justified clearfix">
<?php $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);  if ( $repeatable_fields ) : ?>
<?php foreach ( $repeatable_fields as $field ) { ?>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>
</a>
</li>
<?php } ?> 
<?php endif; ?>
</ul>
<div class="tabs-cntn">
<div id="services-cntn-ajax">
<?php $repeatable_fields = get_post_meta($post->ID,'repeatable_fields', true);
if($repeatable_fields){?>
<iframe frameborder="0" src="<?php echo esc_attr( $field['url'] ); ?>" allowfullscreen=""></iframe>
<?php
} else{

}
?>
<script>
var embedMe = function(id, jQobj) {
var iframes = {};
<?php $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);  if ( $repeatable_fields ) : ?>
<?php foreach ( $repeatable_fields as $field ) { ?>
iframes[1] = '<iframe width="100%" height="400" src="<?php echo esc_attr( $field['url'] ); ?>" frameborder="0" allowfullscreen></iframe>';
<?php } ?> 
<?php endif; ?>
if (typeof iframes[id] === 'undefined') {
return;
}
jQobj.removeClass('notactive');
jQobj.addClass('active');
jQuery('#services-cntn-ajax').html(iframes[id]);
}
jQuery('[data-server]').click(function() {
if (jQuery('li').hasClass('active')) {
return;
}
jQuery('li').parent().find('.buttosn').removeClass('active');
jQuery('li').parent().find('.buttosn').addClass('notactive');
jQuery(this).addClass('active');
jQuery(this).removeClass('notactive');
var id = jQuery(this).data('server');
embedMe(id, jQuery(this));
});
</script>
</div>  
</div>
</div>

my proplem that it display like this

<ul class="tabs-ul nav-justified clearfix">
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>

</ul>

they all have data-server="1"

and in here to they have iframes[1]

<script>
var embedMe = function(id, jQobj) {
var iframes = {};
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';

if (typeof iframes[id] === 'undefined') {
return;
}
jQobj.removeClass('notactive');
jQobj.addClass('active');
jQuery('#services-cntn-ajax').html(iframes[id]);
}
jQuery('[data-server]').click(function() {
if (jQuery('li').hasClass('active')) {
return;
}
jQuery('li').parent().find('.buttosn').removeClass('active');
jQuery('li').parent().find('.buttosn').addClass('notactive');
jQuery(this).addClass('active');
jQuery(this).removeClass('notactive');
var id = jQuery(this).data('server');
embedMe(id, jQuery(this));
});
</script>

so when i click on any server it only shows on of the iframes

i want it to be like this
data-server="1"
data-server="2"
data-server="3"
data-server="4"
etc.
iframes[1]
iframes[2]
iframes[3]
iframes[4]
etc.