JSFiddle - React, Tailwind, and code Playground

HTML

<p>Open the console to see the outputs</p>

JavaScript

var myMatrix = [
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-'],
    ['-','-','-','-','-','-','-','-','-','-']
];

function stepOne(){
	console.log('Step One');
    
    for( var i = 0; i < myMatrix.length; i++ ){
        console.log(myMatrix[i].join(' '));
    }
}

//stepOne();

function stepTwo(coordinates) {
    console.log('Step Two');
    for(var j =0; j < coordinates.length; j ++) {
        myMatrix[coordinates[j].y][coordinates[j].x] = 'x';
    }
    for(var i = 0; i < myMatrix.length; i++) {
        console.log(myMatrix[i].join(' '));
    }
    
     
}

var coordinatesArray = [
    {x: 4, y: 0},
    {x: 5, y: 1},
    {x: 8, y: 2},
    {x: 8, y: 3},
    {x: 3, y: 4},
    {x: 7, y: 6},
    {x: 4, y: 8},
    {x: 7, y: 9},
];

//stepTwo(coordinatesArray);

function stepThree(points) {
    console.log('Step Three');
    
    for(var j =0; j < points.length; j++) {
        myMatrix[points[j].y][points[j].x] = 'x';
        
        for(var k = 0; k < points.length; k++) {
            myMatrix[points[j].y][points[k].x] = 'x';
        }
    }
    
    for(var i = 0; i < myMatrix.length; i++) {
        console.log(myMatrix[i].join(' '));
    }
    
     
}

var pointsArray = [
    {x: 5, y: 0},
    {x: 6, y: 1},
    {x: 8, y: 2},
    {x: 8, y: 3},
    {x: 3, y: 4},
    {x: 6, y: 6},
    {x: 4, y: 8},
    {x: 7, y: 9},
];

stepThree(pointsArray);