Show the details of a particular column in bootstrap modal

Question

I am having a jquery data table in which there is a description field, i want to limit the words to 30 and add a show more link. when the user clicks on show more the comment of that particular id will open in the bootstrap modal. Till now i am able to do this much, but the comment is not coming in the bootstrap modal.

<script type="text/javascript">
        $(document).ready(function () {

            $(document).on("click", ".opencomment", function () {
                var mycomment = $(this).data('FeedbackID');
                $(".modal-body #commentdesc").val(mycomment);
            });

            $('#FeedbackDetails').DataTable({
                "processing": true,

                "ajax": {
                    "url": "/ViewFeedback/LoadData",
                    "type": "GET",
                    "datatype": "json"
                },
                "lengthMenu": [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "All"]
                ],
                "autoWidth": true,
                "responsive": true,
                "lengthChange": true,
                "ordering": true,
                 "fnRowCallback" : function(nRow, aData, iDisplayIndex){
                          var oSettings = this.fnSettings();
                           $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                           return nRow;
                },
                "columns": [
                    { "data": null, "autoWidth": true },
                    { "data": "FeedbackUserName", "name": "User Name", "autoWidth": true },
                    { "data": "FeedBackUserEmailID", "name": "Email ID", "autoWidth": true },
                    { "data": "FeedBackComment", "name": "Comment", "autoWidth": true },
                    { "data": "Designation", "name": "Designation", "autoWidth": true },
                    { "data": "Organization", "name": "Organization", "autoWidth": true },
                    { "data": "ContactNo", "name": "Contact No", "autoWidth": true },
                    { "data": "City", "name": "City", "autoWidth": true },
                    {
                        "data": "FeedBackDate", "name": "Feedback Date", "autoWidth": true,
                        'render': function (jsonDate) {
                            var date = new Date(parseInt(jsonDate.substr(6)));
                            var month = date.getMonth();
                            return date.getDate() + "/" + month + "/" + date.getFullYear();
                        }
                    },


                ],


                columnDefs: [{

                    targets: 3,
                    data:"FeedbackID",
                    render: function (data, type, row, meta) {
                        if (type === 'display' && data.length > 40) {
                           return '<span title="' + data + '">' + data.substr(0, 38) + '...<a href="" data-id="'+data+'" data-toggle="modal" class="opencomment" data-target="#myModal">Show More</a>';

                        }
                        else {
                            return data;
                        }


                    }

                }],

                "language": {
                    "emptyTable": "No Events Found Related To This User"
                }
            });
        });
    </script>
<div class="container" style="margin-top:10px">

            <table id="FeedbackDetails" class="ui celled table">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>User Name</th>
                        <th>Email ID</th>
                        <th>Comment</th>
                        <th>Designation</th>
                        <th>Organization</th>
                        <th>Contact No</th>
                        <th>City</th>
                        <th>Feedback Date</th>
                    </tr>
                </thead>
            </table>
        </div>
       <div id="myModal" class="modal fade" role="dialog">
           <div class="modal-dialog">
               <div class="modal-content">
                   <div class="modal-header">
                       <h4 class="modal-title">Feedback Comment</h4>
                   </div>
                   <div class="modal-body">
                       <p id=""></p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                   </div>
               </div>
           </div>
       </div>

public ActionResult LoadData()
{
    using (DHIFeedbackEntities2 Ms = new DHIFeedbackEntities2())
     {
         var feedbacklist = Ms.FeedBacks.ToList<FeedBack>();
         return Json(new { data = feedbacklist }, JsonRequestBehavior.AllowGet);
     }
}