Adding space inside a class of input tag of dynamic html using jquery

Question

I am creating html table dynamically from json data, and unable to add space inside my input button control, as after separating two classes with space, I am new to using snippet so the code is not working here but it's working fine in my environment, Lots of Thanks in advance ...

function tableGenerator(selector, jsonData, tab) {
  debugger;
  // jsonData is an array
  var keys = Object.keys(Object.assign({}, ...jsonData)); // Get the keys to make the header
  // Add header
  var head = '<thead><tr>';
  keys.forEach(function(key) {
    head += '<th>' + key + '</th>';
  });

  head += '<th>Get Data</th>';
  var rowId = 0;
  $(selector).append(head + '</tr></thead>');
  // Add body
  var body = '<tbody>';
  jsonData.forEach(function(obj) { // For each row
    var row = '<tr>';
    keys.forEach(function(key) { // For each column
      row += '<td>';
      if (obj.hasOwnProperty(key)) { // If the obj doesnt has a certain key, add a blank space.
        row += obj[key];
      }
      row += '</td>';
    });
    debugger;
    row += ' <td> <input type="button" id=' + 'btnSelect' + rowId + ' value="Select"  class=' + '"btnClass\xa0btnCustomClass' + tab + '" />Get Data </td> ';


    //row += ' <td> <input type="button" id='+'btnSelect'+rowId+ ' value="Select" class="btnClass btnCustomClass"  />Get Data </td> ';
    body += row + '<tr>';
    rowId = rowId + 1;
    // SelectDataFromTbl(tab, rowId);
  })

  $(selector).append(body + '</tbody>');
}



var jsonData = [{
  "TransactionType": "REVERSAL",
  "TransactionRange": "Is Lower Than ",
  "TransactionRule": "Block transaction",
  "AmountFrom": 500,
  "AmountTo": 500,
  "PlausibilityTransTypeId": 4,
  "PlausibilityTransRangeId": 2,
  "PlausibilityRuleActionId": 1,
  "PlausibilityRuleDetailId": 188
}, {
  "TransactionType": "REVERSAL",
  "TransactionRange": "Is Between",
  "TransactionRule": "Allow transaction",
  "AmountFrom": 500,
  "AmountTo": 500,
  "PlausibilityTransTypeId": 4,
  "PlausibilityTransRangeId": 3,
  "PlausibilityRuleActionId": 3,
  "PlausibilityRuleDetailId": 189
}, {
  "TransactionType": "REVERSAL",
  "TransactionRange": "Is Between",
  "TransactionRule": "Move transaction in suspect console",
  "AmountFrom": 10000,
  "AmountTo": 10000,
  "PlausibilityTransTypeId": 4,
  "PlausibilityTransRangeId": 3,
  "PlausibilityRuleActionId": 2,
  "PlausibilityRuleDetailId": 190
}, {
  "TransactionType": "REVERSAL",
  "TransactionRange": "Is Higher Than",
  "TransactionRule": "Block transaction",
  "AmountFrom": 100000,
  "AmountTo": 100000,
  "PlausibilityTransTypeId": 4,
  "PlausibilityTransRangeId": 1,
  "PlausibilityRuleActionId": 1,
  "PlausibilityRuleDetailId": 191
}];



tableGenerator('#tbltab2', jsonData, 'tab2')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbltab2" style="width: 100%;"></table>

Answer 1

To separate the classes in the button you create you can simply use a single whitespace character. There's no need for any unicode. Also note that the HTML generation can be made more succinct and simplified using map() on the array of objects deserialised from your JSON. Try this:

function tableGenerator(selector, jsonData, tab) {  
  var keys = Object.keys(Object.assign({}, ...jsonData));
  let headerHtml = `<thead><tr>${keys.map(k => `<th>${k}</th>`).join('')}<th>Get Data</th></tr></thead>`;
  
  let buttonCell = `<td><input type="button" value="Select" class="btnClass btnCustomClass${tab}" />Get Data</td>`;
  let bodyRowsHtml = jsonData.map(o => `<tr>${keys.map(k => `<td>${o[k]}</td>`).join('')}${buttonCell}</tr>`);

  $(selector).append(`${headerHtml}<tbody>${bodyRowsHtml}</tbody>`);
}

var jsonData = [{TransactionType:"REVERSAL",TransactionRange:"Is Lower Than ",TransactionRule:"Block transaction",AmountFrom:500,AmountTo:500,PlausibilityTransTypeId:4,PlausibilityTransRangeId:2,PlausibilityRuleActionId:1,PlausibilityRuleDetailId:188},{TransactionType:"REVERSAL",TransactionRange:"Is Between",TransactionRule:"Allow transaction",AmountFrom:500,AmountTo:500,PlausibilityTransTypeId:4,PlausibilityTransRangeId:3,PlausibilityRuleActionId:3,PlausibilityRuleDetailId:189},{TransactionType:"REVERSAL",TransactionRange:"Is Between",TransactionRule:"Move transaction in suspect console",AmountFrom:1e4,AmountTo:1e4,PlausibilityTransTypeId:4,PlausibilityTransRangeId:3,PlausibilityRuleActionId:2,PlausibilityRuleDetailId:190},{TransactionType:"REVERSAL",TransactionRange:"Is Higher Than",TransactionRule:"Block transaction",AmountFrom:1e5,AmountTo:1e5,PlausibilityTransTypeId:4,PlausibilityTransRangeId:1,PlausibilityRuleActionId:1,PlausibilityRuleDetailId:191}];

tableGenerator('#tbltab2', jsonData, 'tab2')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbltab2" style="width: 100%;"></table>