送信ボタンを押下するとチェックを入れたものだけ本文に表示

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="お肉">お肉
                        <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>
                    
                    <p><input type="button" id="button5" value="全ONボタン" /></p>
                    <p><input type="button" id="button6" value="全OFFボタン" /></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>

 $('#chgDateSub').on('click', function() {
   $('input[type=checkbox]:checked').each(function(){
     var value = '<span>'+$(this).val()+'</span>';
     $(value).appendTo($('p'));
   });
 });

モーダルウィンドウをしています。
モーダルウィンドウにチェックボックスは入っています。そこで"お肉"、"魚"、"卵"、"芋"それぞれチェックして送信ボタンを押すと本文の方にそれぞれお肉、魚など表示させたいです。
今このコードだと本文にお肉魚など表示されますが、モーダルウィンドウの方にもお肉魚と表示されてしまいます。本文にのみ表示させたいです。どこを修正したらよろしいでしょうか

Answer 1

        $('#chgDateSub').click(function(){
            $('input[type=checkbox]:checked').each(function(){
                var value = '<span>'+$(this).val()+'</span>';
                $(value).appendTo($('#test'));
            });
        });

Answer 2

送信するのですよね？クリックイベントは一旦キャンセルしないとまずくないですか？
pにappendToするのであればチェックボックスを囲むpに追加されるのは正しいのでは？
モーダルと言っていますがその記述も見当たらないようですし

Comments

[Tanimican]

モーダル部分を追加しました。

[yambejp]

codepenなどソースが動作するサイトに、現状の動作が確認できるソースをアップできませんか？

[Tanimican]

こんな感じでしょうか？

[yambejp]

画像をはられても動作は確認できませんが・・・
送信時にモーダルを表示するのかと思っていましたが
チェックボックスはモーダル側にあるのですね？

モーダル自体に送信機能があり、送信するとどうなるのでしょうか？
普通送信すればモーダルもなにも関係ありませんよね？
本文に値が追加されることもありません

[Tanimican]

チェックボックスはモーダル側にあります。
送信ボタンを押した場合、本文の方にチェックした項目が表示されるというのをしたいです。

[yambejp]

送信したら別のページに遷移するのではないのでしょうか？

[Tanimican]

画像であるHELLOの下に表示させたいです
そのページが本文の部分です

[yambejp]

※解決したみたいなので。これ以上の情報提供は結構です