title: How to add “jQuery” onclick functionality for a column each row in jQgrid to display different popups for different rows
body: <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html lang="en"&gt;
   &lt;head&gt;
   &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;title&gt;Index&lt;/title&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
   &lt;link href="css/bootstrap.css" rel="stylesheet" media="screen" type="text/css"&gt;
   &lt;link href="css/cerulean.css" rel="stylesheet" media="screen and (min-width: 37.5em)" type="text/css"&gt;
   &lt;link href="css/custom.css" rel="stylesheet" media="screen" type="text/css"&gt;
   &lt;link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" media="screen" type="text/css"&gt;
   &lt;link href="css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css"&gt;
   &lt;script type='text/javascript' src="js/respond.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery-1.10.2.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery-ui-1.10.4.js"&gt;&lt;/script&gt;
   &lt;script src="js/grid.locale-en.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.jqGrid.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt; 
   /////////////////UPCOMING RECORD DATE/////////////////     
   $(function () {
        'use strict';
        var mydata = [{cusip: "&lt;a href='#'&gt;1234567890123456&lt;/a&gt;", oid_type: "F", oid_type_desc: "Federal/Agency STRIP"},                                                             {cusip: "&lt;a href='#'&gt;1234567890123456&lt;/a&gt;", oid_type: "S", oid_type_desc: "Taxable STRIP not backed by a federal/agency bond"}],
        $grid = $("#myOID"),  
        viewParam = { 
            bSubmit: "Save and Close",
            recreateForm: true,
            beforeShowForm: function ($form){
            $form.find("td.DataTD").each(function () {
            var html = $(this).html();  // &amp;nbsp;&lt;span&gt;&amp;nbsp;&lt;/span&gt;
            if (html.substr(0, 6) === "&amp;nbsp;") {
                 $(this).html(html.substr(6));
            }
        });
        }};
        $grid.jqGrid({
            datatype: 'local',
            data: mydata,
            colNames: ["CUSIP", "OID Code", "OID Type Description"],
            colModel: [
            {name: 'cusip', align: 'left', width: 120, sorttype: 'text', index: 'cusip'},
            {name: 'oid_type', align: 'left', width: 90, sorttype: 'text', index: 'oid_type'},
            {name: 'oid_type_desc', align: 'left', width: 440, sorttype: 'text', index: 'oid_type_desc'},
            ],
            rowNum: 15,
            rowList: [15],
            pager: '#pager1',
            gridview: true,
            autoWidth: true,
            //editable: true,
            rownumbers: false,
            //  onSelectRow: function (id) {
            //        $(this).jqGrid('viewGridRow', id, viewParam);
            //   },
            sortname: 'invdate',
            viewrecords: false,
            sortorder: 'desc',
            width: 650,
            shrinkToFit: false,
            height:"auto"
        });
      });
      /////////////////UPCOMING RECORD DATE ENDS/////////////////  
  
  
  
                                              &lt;/script&gt;
  
              &lt;/head&gt;
  
              &lt;body&gt;
  
              &lt;div class="row" id='oid_index_jqgrid'&gt;
                                          &lt;div class="col-xs-6 oid_index_jqgrid_col"&gt;
                                         &lt;div class="col-md-6 oid_index_jqgrid"&gt;
                                                      &lt;table id="myOID"&gt;&lt;/table&gt;
                                                  &lt;div id="pager1"&gt;&lt;/div&gt; 
                                                  &lt;/div&gt;
                                        &lt;/div&gt;
  
                                      &lt;/div&gt;
  
  
      &lt;div class="modal fade" id='PIK'&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;PIK&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;form role="form"&gt;
              &lt;div class="row"&gt;
  
                      &lt;div class="col-md-6"&gt;
                     &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;Bond Unit Factor&lt;/label&gt;
                      &lt;select class="form-control CUSIP_Form_Control"&gt;
                        &lt;option&gt;A&lt;/option&gt;
                        &lt;option&gt;B&lt;/option&gt;
                        &lt;option&gt;C&lt;/option&gt;
                        &lt;option&gt;D&lt;/option&gt;
                        &lt;option&gt;E&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;PIK Rate&lt;/label&gt;
                      &lt;input type="text" class="form-control CUSIP_Text_Input"&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;Cash Rate&lt;/label&gt;
                      &lt;input type="text" class="form-control CUSIP_Text_Input"&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;Payment Mode&lt;/label&gt;
                      &lt;select class="form-control CUSIP_Form_Control"&gt;
                        &lt;option&gt;Cash&lt;/option&gt;
                        &lt;option&gt;Bonds&lt;/option&gt;
                        &lt;option&gt;Bankruptcy&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default popup_close" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  
  &lt;div class="modal fade" id='GIK'&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;PIK&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;form role="form"&gt;
              &lt;div class="row"&gt;
  
                      &lt;div class="col-md-6"&gt;
                     &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;Bond Unit Factor&lt;/label&gt;
                      &lt;select class="form-control CUSIP_Form_Control"&gt;
                        &lt;option&gt;A&lt;/option&gt;
                        &lt;option&gt;B&lt;/option&gt;
                        &lt;option&gt;C&lt;/option&gt;
                        &lt;option&gt;D&lt;/option&gt;
                        &lt;option&gt;E&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;PIK Rate&lt;/label&gt;
                      &lt;input type="text" class="form-control CUSIP_Text_Input"&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;Cash Rate&lt;/label&gt;
                      &lt;input type="text" class="form-control CUSIP_Text_Input"&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label for="selectUser" class="CUSIP_PageTitle Inner_Titles"&gt;Payment Mode&lt;/label&gt;
                      &lt;select class="form-control CUSIP_Form_Control"&gt;
                        &lt;option&gt;Cash&lt;/option&gt;
                        &lt;option&gt;Bonds&lt;/option&gt;
                        &lt;option&gt;Bankruptcy&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default popup_close" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>In the above Html, I have a jQgrid table. I am very new to jQuery and my jQgrid table is working fine. But what I need is I kept different popups in this html. So if I click on some "row" in the column named as "CUSIP", some particular popup with unique 'id' should be displayed. I am not understanding how to write the 'onclick' functionality for this. Could anybody help me please. Remember that What I need is each row in 'CUSIP' column has different popup with a unique id, so how to write a 'onclick' function with a 'id' for each cell. I kept 2 bootstrap popups with different id's in this. each should be displayed by clicking on different rows.</p>