title: How to populate datatables with Id and Text but only show Text
body: <p>I have a datatable thats initialised like this:</p>
  
  <pre><code>&lt;script&gt;
      var selected = Array();
      var dataSet = [];
      var idSet = [];
      var rowItem = "";
      var rowIdItem = "";
      $(document).ready(function () {
          var table = $("#table").DataTable({
              "data": dataSet,
              "filter":false,
              "language": {
                  "search": "",
                  "searchPlaceholder": " Search"
              },
              "select": {
                  "style": 'multi'
              },
              "ordering": true,
              "lengthChange": false,
              "columns": [
                 { "title": "Name"},
              ],
              "responsive": true,
              "processing":true,
          }).columns.adjust()
          .responsive.recalc();
          new $.fn.dataTable.FixedHeader(table);
  
          $("#roleSection").on("click", "#removeRole", function (e) {
              let updatedDataSet = [];
              table.rows(".selected").remove().draw();
              table.rows().every(function (Id,Table,Row) {
                  let row = this;
                  updatedDataSet.push(row.data())
              });
              dataSet = updatedDataSet;
              return false;
          });
  
          $(document).on($.modal.AFTER_CLOSE, function (event, modal) {
              dataSet.push([rowItem]);
              idSet.push([rowIdItem]);
              table.row.add([rowItem]).draw();
              $("#modal").empty();
          });
  
          $(document).on("submit","#form",function (e) {
              var form_data = new FormData;
              for (var i = 0; i &lt; idSet.length; i++) {
                  var row = $("&lt;input /&gt;").attr("type", "hidden").attr("name", "Roles[]").attr("value", idSet[i]);
                  $("#form").append(row);
              }
              return true;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>At the moment if I populate it, it only shows the name of the item and not the Id.</p>
  
  <p>When I want to add an item to it, I open a modal window that has this code:</p>
  
  <pre><code>    &lt;script&gt;
      $(document).ready(function () {
          $(document).on("submit", "#modal", function (e) {
              e.preventDefault();
              var selectedText = $("#@Html.IdFor(m=&gt;m.RoleId) :selected").text();
              var selectedId = $("#@Html.IdFor(m=&gt;m.RoleId)").val();
              var form_data = $(this).serializeArray();
              form_data.push({ name: "RoleList", value: dataSet });
              form_data.push({ name: "RoleName", value: selectedText});
              console.log($("#@Html.IdFor(m=&gt;m.RoleId) :selected").text());
              console.log($("#@Html.IdFor(m=&gt;m.RoleId)").val());
              $.ajax({
                  url: "@Url.Action("VerifyRole", @ViewContext.RouteData.Values["controller"].ToString())",
                  method: "POST",
                  data: form_data,
                  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                  success: function (result) {
                      if (result.success) {
                          rowItem = selectedText;
                          rowIdItem = selectedId;
                          $("#close").trigger("click");
                          return;
                      }
                      $.each(result.errors, function (index, item) {
                          // Get message placeholder
                          var element = $('[data-valmsg-for="' + item.propertyName + '"]');
                          element.empty();
                          // Update message
                          element.append($('&lt;span&gt;&lt;/span&gt;').text(item.errorMessage));
                          // Update class names
                          element.removeClass('field-validation-valid').addClass('field-validation-error');
                          $('#' + item.propertyName).removeClass('valid').addClass('input-validation-error');
                      });
                  }
              });
              return false;
          });
      });
  &lt;/script&gt;
  &lt;div class="col-sm-12"&gt;
  &lt;h2&gt;Add Role&lt;/h2&gt;
  &lt;/div&gt;
  @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "modal" }))
  {
      @Html.AntiForgeryToken()
      &lt;div class="col-sm-12"&gt;
          &lt;div class="form-group"&gt;
              @Html.DropDownListFor(m =&gt; m.RoleId,Model.Roles)
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="clearfix"&gt;
                  &lt;input type="submit" id="save" value="Save" class="btn btn-primary pull-right" /&gt;
                  &lt;a href="#" id="close" class="btn btn-default pull-right" rel="modal:close"&gt;Cancel&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>This adds a name to the dataSet array and its id to the idSet array.</p>
  
  <p>But I realized that while I can add the name to my datatable and populate a separate array with the ids, when it comes to removing an item from the table, I have no way of removing the Id from the array and then passing it through. Is there a way to do this?</p>