I am creating dynamic table rows and tds in it. In the last td I need to have anchor tags with onclick event passing some data as json string. It is working fine unless I give space to any value of json string, it converts all remaining data to html attributes after space. I am using JSON.stringify(data) but feels like it didn't convert it to real string. I don't know!

The last td of table rows in html just work fine even if there are spaces in values as keys and values are form data. I am using echo json_encode in onclick function

<a href="#" data-toggle="modal" data-target="a{{$i}}" 
onclick='show_detail_modal(JSON.stringify(<?php echo json_encode($data);?>))' 
<i class="far fa-eye fa-sm"></i>
</a>

var str_data = JSON.stringify(data);
var submit_type_text = $(form).find('button[type=submit]').text();
var tbl_id = main_form_id.replace('tabform', '')+'table';
var last_tr = $('#'+tbl_id).children('tbody').children('tr:last');
var last_tr_no_plus_one = parseInt($(last_tr).children('td:first').text())+1;
var actions = '<a href="#" data-toggle="modal" data-target="a'+last_tr_no_plus_one
+'"onclick=show_detail_modal('+str_data+') style="color: inherit;"><i class="far fa-eye fa-sm"></i></a>&nbsp;';
var last_td_of_last_tr = actions;     
var inputs = $(form).find('.input');

var tr_and_tds = '<tr>';
    tr_and_tds += '<td>'+last_tr_no_plus_one+'</td>';

    $.each(inputs, function(a, b){
        tr_and_tds += '<td>'+$(b).val()+'</td>';                
    });
    
    tr_and_tds += '<td>';
    tr_and_tds += last_td_of_last_tr;
    tr_and_tds += '</td>';
    tr_and_tds += '</tr>';
    $('#'+tbl_id).append(tr_and_tds); 

Notice after the space in New York it converts rest of the data to attributes