addRow JSFiddle

error when adding row. Fiddling till solved ....

HTML

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" id="addbutton" class="btn btn-default">Add Row</button>
<table
id="scraped"
class="table table-sm table-hover dataTable no-footer"
cellspacing="0"
aria-describedby="scraped_info"
role="grid"
style="width: 100%"
>
<thead>
<tr>
<th>photo</th>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>email</th>
<!-- <th></th>
<th></th> -->
</tr>
</thead>
<tbody></tbody>
</table>


<!-- end -->

JavaScript

var colors = [
		'Crimson ',
		'Cyan ',
		'DarkBlue ',
		'DarkCyan ',
		'DarkGoldenRod ',
		'DarkGray ',
		'DarkGrey ',
		'DarkGreen ',
		'DarkKhaki ',
		'DarkMagenta ',
		'DarkOliveGreen ',
		'DarkOrange ',
	];

	//DataTables 
	$(document).ready(function() {
		var table = $('#scraped')
			.DataTable({
				// scroller
				// scrollY: '50vh',

				responsive: true,
				dom: '<"float-right"B>flpit',
				pageLength: 250,
				lengthMenu: [[10, 100, 250, 500, -1], [10, 100, 250, 500, 'All']],
				buttons: [
					'copy',
					'excel',
					'pdf',
					'print',
					{
						text: '<i class="fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i>',
						className: 'animated bounce',

						action: function() {
							$('#scraped').toggleClass('cards');
							$('#scraped thead').toggle();
							$('#card-toggle .fa').toggleClass(['fa-table', 'fa-id-badge']);

							table.draw('page');
						},
						attr: {
							title: 'Change views',
							id: 'card-toggle',
						},
					},
				],
				select: 'single',

				// data: sampleData,
				ajax: {
					url: 'https://api.myjson.com/bins/1gyzoc',

					dataSrc: 'rows',
				},
				columns: [
					{
						/* created column to show a picture just to make this demo look better */
						orderable: false,
						data: 'Photo',
						name: 'Photo',
						defaultContent: '',
						visible: true,
						className: 'text-center',
						width: '20px',
						createdCell: function(td, cellData, rowData, row, col) {
							var $ctl = $('<i class="fa fa-user fa-fw"></i>').css(
								'color',
								colors[Math.round(Math.random() * colors.length) + 1]
							);
							$(td).append($ctl);
						},
					},
					//columns to display

					{ data: 'doc._id' },
					{ data: 'doc.name' },
					{ data: 'doc.mobile' },
					{ data: 'doc.email' },
				],

				drawCallback: function(settings) {
					console.log('drawn');
					if ($('#scraped').hasClass('cards')) {
						// Create an array of labels containing all table headers
						var labels =...