How to update filed when click - wordpress

Question

I use acf to creat 3 fields, below, i put 3 buttons to switch between 3 fields, problem is, i embed iframe to play video, when i play, even i clicked on another button, it still play on field 1, anyone can help me this ? i want when click on button, it will stop loading iframe from field 1, then replace with iframe from field 2. Tks, sorry for my bad english.
Here my code to show 3 fields...
<script type="text/javascript">
$(function() {
var $allItems = $(".food-container > div");
$(document.body).on("click", "a.button", function(evt) {
var id = this.id,
itemId = ".food-container > #item-" + id;
$allItems.not($(itemId).fadeToggle()).hide();
if (evt.target.id == 4) {
$('.burger-disclaimer').toggle();
} else {
$('.burger-disclaimer').hide();
}
});
});
</script>
<div class="food-container">
<div id="item-1" style="display: block;">
<div class="food"><iframe class="re-if" src="<?php the_field('sv1'); ?>"></iframe></div>
</div>
<div id="item-2" style="display: none;">
<div class="food"><iframe class="re-if" src="<?php the_field('sv2'); ?>"></iframe></div>
</div>
<div id="item-3" style="display: none;">
<div class="food"><iframe class="re-if" src="<?php the_field('sv3'); ?>"></iframe></div>
</div>
<a id="1" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 1<i class="fa fa-caret-right"></i></a>
<a id="2" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 2<i class="fa fa-caret-right"></i></a>
<a id="3" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 3<i class="fa fa-caret-right"></i></a>
<?php
$link = get_field('download');
if( $link ): ?>
<a class="button" href="<?php echo esc_url( $link ); ?> target=">Download</a>
<?php endif; ?>
</div>