hide and show div inside bootstrap modal using Jquery?

i am using this button to edit my posts via bootstrap modal

 <button type="button" class="fa fa-edit"  data-toggle="modal" data-target="#edit-post"></button>

and the bootstrap modal is

@foreach($posts as $key=>$post) × مشاركة جديدة {!! Form::model($post,['method'=>'POST', 'action'=>'PostController@postEditPosts', 'files'=>true]) !!}

                <div class="form-group">
                    {!! Form::label('title','العنوان:') !!}
                    {!! Form::text('title',null,['class'=>'form-control']) !!}
                </div>

                <div class="form-group">
                    {!! Form::label('showcat','إختار ﻹظهار حقل الفئة والصورة للتحديث') !!}
                    {!! Form::checkbox('showcat',null,null,['class'=>'field']) !!}

                </div>

                <div id="catdiv">

                    <div class="form-group">
                        {!! Form::label('category_id','الفئة:') !!}
                        {!! Form::select('category_id', $categories, null,['class'=>'form-control']) !!}

                    </div>

                    <div class="form-group">
                        {!! Form::label('photo_id','الصورة:') !!}
                        {!! Form::file('photo_id',null,['class'=>'form-control']) !!}

                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('body','النص:') !!}
                    {!! Form::textarea('body',null,['class'=>'form-control ckeditor']) !!}
                </div>


                <div class="form-group">
                    {!! Form::submit('تحديث مشاركة',['class'=>'btn btn-primary']) !!}
                    <input type="hidden" name="post_id" value=""/>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
@endforeach

so if i want to display the div "catdiv" i just check the checkbox 'showcat' and i do this via jquery.. here is the jquery

$(document).ready(function(){
    $('#modal-body #showcat').change(function(){
        if(this.checked)
            $('#catdiv').fadeIn('slow');
        else
            $('#catdiv').fadeOut('slow');

    });


});

so when i click any post to edit, the bootstrap opens with the post data to edit, but when i check the checkbox 'showcat' its shows the hidden div just for some posts...

so my question is how to make the checkbox 'showcat' works for all posts inside the bootstrap modal

Thank you

via Tariq