how do I store data in cookies?

so this is my bootstrap modal I have a Controller from where m getting email list I want to set the selected email group as default dropdown using cookies suppose for example if i have Group 1 and Group 2 which contains list of email when a user sends or submits this form i want this modal to remember the previously selected Groups from dropdown

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">

                        <h4 class="modal-title">Send Report</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div>

                                <div class="row">

                                    <div class="mb-3 col">
                                        <label for="to-list" class="col-form-label"> To:</label>
                                        <!-- <input type="text" class="form-control" id="to-list" value=""> -->
                                        <textarea class="form-control" type="text" id="to-list" rows="3"></textarea>

                                    </div>
                                    <div class="input-group col ">
                                        <label for="to-name" class="col-form-label"> Select Group:</label>
                                        <select name="Group" listTarget='to-list' id="toList" class="list-btn form-control form-control-sm" >
                                            <option value="none" selected hidden></option>
                                            @foreach($emailgroups as $emailgroup)
                                            <option value=""></option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="mb-3 col">
                                        <label for="cc-list" class="col-form-label"> Cc:</label>

                                        <textarea class="form-control" type="text" id="cc-list" rows="3"></textarea>
                                    </div>
                                    <div class="input-group col ">
                                        <label for="bcc-name" class="col-form-label"> Select Group:</label>
                                        <select name="Group" target='cc-list' class="list-btn form-control form-control-sm" id="ccList">
                                            <option value="none" selected hidden>select group</option>
                                            <option value="none" selected hidden></option>
                                            @foreach($emailgroups as $emailgroup)
                                            <option value=""></option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="mb-3 col">
                                        <label for="bcc-list" class="col-form-label"> Bcc:</label>

                                        <textarea class="form-control" type="text" id="bcc-list" rows="3"></textarea>
                                    </div>
                                    <div class="input-group col ">
                                        <label for="bcc-name" class="col-form-label"> Select Group:</label>
                                        <select name="Group" class="list-btn form-control form-control-sm" id="bccList">
                                            <option value="none" selected hidden></option>
                                            @foreach($emailgroups as $emailgroup)
                                            <option value=""></option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="mb-3">
                                <label for="recipient-name" class="col-form-label"> Add Recipient:</label>
                                <input type="text" class="form-control" id="recipient-name">
                            </div>
                             <div class="mb-3" id="show-recipient">

                            </div> -->
                        </form>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="send-report">Send Report</button>
                    </div>
                </div>

            </div>
        </div>

via Chebli Mohamed