javascript - how to change data when select option from dropdown from the right dev and append the result to the left div

Question

here I have this form where I post some careers

what I really need is when select one of the position from the dropdown gets the position description in the div on the left side

I tried this code please correct me my dropdown HTML code where I choose any position

        <div class="form-group">
                                            <select class="form-control"  name="position_id" id="mySelected">
                                                <option value="{{null}}">@lang('panel.select_position')</option>
                                                @foreach($positions as $position)
                                                    <option data-id="{{$position->id}}" value="{{$position->id}}">{{$position->position}}</option>
                                                @endforeach
                                            </select>

                                        </div>

here where I need to show the job description

      <div class="content-featcher">

                                @foreach($positions as $position)

                                    <hr>
                                    <p class="text-center" id="result">{!! $position->job_description !!}</p>
                                @endforeach
                            </div>

I know this is the wrong code but I tried to do it

   $(document).on('change', '#mySelected', function (e) {
                e.preventDefault();
                var className = "mySelected" + $(this).attr('data-id');
                console.log(className)
                $('#result').append(`.${className}`).fadeOut(300);
                $(`.${className}`).fadeIn(300);
            })

Answer 1

等待大神解答