HTML/JS/PHP无线电、javascript、模式出现和消失

我有一个页面，有foreach。

大约有4个foreach具有相同的div，但div中的信息不同。一切都是用模态（bootstrap）制作的。如果我选择某种单选按钮，div就会出现。但若我关闭模态并打开另一个模态，下一个模态就会被窃听。

<div class="radio">
    <label>
        <input type="radio" name="radio" value="group1" onchange="show(this.value)"> Show group1<br/>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="radio" value="group2" onchange="show2()"> Show group2<br/>
    </label>
</div>
<?php
foreach ($array as $row) {
?>
    <div class="group1">
        1 ...
    </div>
    <div class="group2">
        2 ...
    </div>
<?php
}
?>
<script type="text/javascript">
    function show(str){
        $('.group1').show();
        $('.group2').hide();
    }
    function show2(sign){
        $('.group2').show();
        $('.group1').hide();
    }
</script>

那么，我应该添加很多JS，还是有其他方法可以让它很好地工作呢？