クリックイベントが重複されている場合

Question

<!-- modal open -->
        <a class="js-modal-open" href="" data-target="modal01">モーダルウィンドウを開く</a>
        <!-- ./modal open -->
        <p>HELLO</p>
        <div id="test"></div>
        <div id="test2"></div>
        
        <!-- modal -->
        <div id="modal01" class="c-modal js-modal">
        <!--<form role="form" action="" method="post">-->
            <div class="c-modal_bg js-modal-close"></div>
            <div class="c-modal_content _lg">
                <div class="c-modal_content_inner">
                    <!--ここにモーダルウィンドウの内容が入ります-->
                    
                    <br>予算
                    <input type="text" id="yosan" name="yosan">円
                    
                    <p>
                        <input type="checkbox" name="shopping" id="c1" value="お肉">お肉
                        <select name="meat" id="m11">
                            <option value="牛肉">牛肉</option>
                            <option value="豚肉">豚肉</option>
                            <option value="鶏肉">鶏肉</option>
                        </select>
                        <input type="checkbox" name="shopping" id="c2" value="魚">魚
                        <input type="checkbox" name="shopping" id="c3" value="卵">卵
                        <input type="checkbox" name="eating" id="c4" value="芋">芋
                    </p>
                  
                    <a class="js-modal-close c-modal_close" href="">
                        <br>閉じる
                    </a>
                    <button type="submit" class="btn btn-primary" id="chgDateSub" name="soushin" value="dateup">送信する</button>
                </div>
            </div>

            $(function(){
                $('#button5').on('click',function(){
                    $('input:checkbox[name="shopping"]').val(["お肉","魚","卵"]);
            });
            $('#button6').on('click', function(){
                $('input:checkbox[name="shopping"]').prop('checked',false);
                $('input:checkbox[name="eating"]').prop('checked',false);
            });
            $('#chgDateSub').on('click', function(){
                $('input[type=checkbox]:checked').each(function(){
                    var value = '<span>'+$(this).val()+'</span>';
                    $(value).appendTo($('#test'));
                });
            });
            $('#chgDateSub').on('click', function(){
                $('input[type=radio]:checked').each(function(){
                    var value = '<span>'+$(this).val()+'</span>';
                    $(value).appendTo($('#test'));
                });
            });
            $('#chgDateSub').on('click', function() {
                var str = $('#m11 option:selected').text();
                $('#test').text(str);
            });
            $('#m11').hide();
            $('#c1').on('click', function(){
                $('#m11').slideToggle(this.checked);
            });
            });

チェックボックスを使って、チェックを入れて送信ボタンを押下すると表示させるようにしていました。
ですが、
$('#chgDateSub').on('click', function() {
var str = $('#m11 option:selected').text();
$('#test').text(str);
});
$('#m11').hide();
$('#c1').on('click', function(){
$('#m11').slideToggle(this.checked);
});
ここから重複されてチェックしてもお肉の部分しか表示されなくなり、この場合どうしたらよろしいですか？

魚、卵、芋の部分がチェックを入れても送信できません。この部分にチェックを入れて送信した場合、牛肉と表示されます。
ここの魚、卵、芋が表示できるようにしたいです。

１枚目が本文です。
２枚目は魚を送信しようとしています。
３枚目送信を押した後の結果です。

魚を押しているのに、お肉の項目（牛肉）が表示されているってことです。

Comments

[yambejp]

何をしたときにどうなる想定か、もうすこし丁寧に説明してください。
とりあえず動作は安定していませんが「お肉」をチェックに連動して
牛・豚・鶏のセレクトボックスが表示/非表示されるのはわかりますが
その他のチェックボックスはどうしたいのでしょうか？

チェック状態で全OFFしてもセレクトボックスが消えないのをなんとかしたいのでしょうか？