当单选按钮组中的无线电改变时，图像会发生变化

Question

我在里面有三个标签，我有一组单选按钮，当单击单选按钮时，它将成为单选按钮的图像。

但我的问题是当我在标签中的任何地方更改图像时它只反映到第一个标签....请查看此代码并告诉我正确的方法

＆＃13;

＆＃13;

$('input[type=radio]').on('click', function() {
        switch ($(this).val()) {
            case '1':
                $(this).parents('#group').find(".good").attr('src', 'img/good1.png');
                $(this).parents('#group').find(".bad").attr('src', 'img/bad.png');
                break;
            case '3':
                $(this).parents('#group').find(".bad").attr('src', 'img/bad1.png');
                $(this).parents('#group').find(".good").attr('src', 'img/good.png');
                break;
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="RatContent" id="tab1">
        <ion-scroll direction="y" style="height: 58vh">
            <div class="col">
                <div class="row questionrow" id="group">
                    <div class="col col-80">
                        <h5>food was served hot and fresh?</h5>
                    </div>
                    <div class="col col-10">
                        <input type="radio" name="emotion" value="1" id="good" class="input-hidden" required />
                        <label for="good">
                            <img class="good" src="img/good.png">
                        </label>
                    </div>
                    <div class="col col-10">
                        <input type="radio" name="emotion" value="3" id="ok" class="input-hidden" required />
                        <label for="ok">
                            <img class="bad" src="img/bad.png">
                        </label>
                    </div>
    
                </div>
            </div>
    
        </ion-scroll>
    </div>
    
    <div class="RatContent" id="tab2">
        <ion-scroll direction="y" style="height: 58vh">
            <div class="col">
                <div class="row questionrow" id="group">
                    <div class="col col-80">
                        <h5>food was served hot and fresh?</h5>
                    </div>
                    <div class="col col-10">
                        <input type="radio" name="emotion" value="1" id="good" class="input-hidden" required />
                        <label for="good">
                            <img class="good" src="img/good.png">
                        </label>
                    </div>
                    <div class="col col-10">
                        <input type="radio" name="emotion" value="3" id="ok" class="input-hidden" required />
                        <label for="ok">
                            <img class="bad" src="img/bad.png">
                        </label>
                    </div>
    
                </div>
            </div>
    
        </ion-scroll>
    </div>
    
    <div class="RatContent" id="tab3">
        <ion-scroll direction="y" style="height: 58vh">
            <div class="col">
                <div class="row questionrow" id="group">
                    <div class="col col-80">
                        <h5>food was served hot and fresh?</h5>
                    </div>
                    <div class="col col-10">
                        <input type="radio" name="emotion" value="1" id="good" class="input-hidden" required />
                        <label for="good">
                            <img class="good" src="img/good.png">
                        </label>
                    </div>
                    <div class="col col-10">
                        <input type="radio" name="emotion" value="3" id="ok" class="input-hidden" required />
                        <label for="ok">
                            <img class="bad" src="img/bad.png">
                        </label>
                    </div>
    
                </div>
            </div>
    
        </ion-scroll>
    </div>

＆＃13;

＆＃13;

＆＃13;