Incorrect syntax for declaring css styles fixed. Attributes should be able to contain the entire css style string. You can use the template syntax to insert the word variable into your desired HTML string.
Use the index (idx) to get the position in your apiSuggestion array that you are comparing to.

// grab text content and split into array with ' ' as delimiter
let initial = document.getElementById('initial').textContent.split(' ');

// your output suggests that "bonker" was a typo for "bonkers"?
let apiSuggestion = ["something", "else", "went", "bonkers"];

let matchMaker = initial.map(function(word, idx){
 if( word !== apiSuggestion[idx] ){
    return `
        <span style="background-color:black; color:red">
         ${word}
        </span>
          `
   } else {
         return word;
         }
});

// escaped space (&nbsp;) because spaces will get collapsed between HTML elements
document.getElementById("suggestion").innerHTML = matchMaker.join('&nbsp;');

<div> Initial:<p id="initial">somthng else wnet bonkers</p></div>
<div> Fix this typo: <p id="suggestion">somthng wnet</p></div>

style=“ background-color:black; color:red;>

Unclosed quote, and you don’t actually need this style anymore since you are highlighting words individually

style=”background-color:black”; color:”red”>

This is interpreted as attributes:

• style=”background-color:black”
• ;
• color:"red"

Hopefully the mapping code is self explanatory. You weren’t returning the value that each element should be “mapped” (or in other words transformed) to.

Desired output:

I’m not an expert in JavaScript and I’m learning. I know my code is hacky but I’m stuck at this level and need some help. I tried searching for similar solutions, with no luck reaching out to the experts.
I have two arrays:

let initial = ["somthng", "else", "wnet" , "bonkers"];
let apiSuggestion = ["something", "else", "went", "bonker"];

I would like to compare the “initial” with “apiSuggestion” and render the initial back to HTML with “misspelled” words with CSS styles, background-color: black and color: red;
I am able to do this:

<div> Initial:<p id="initial">somthng else wnet bonkers</p></div>
<div> Fix this typo: <p id="suggestion" style="background-color:black; color:red;>somthng wnet</p></div>

<script>
  let matchMaker = initial.filter(function(word){
        return apiSuggestion.indexOf(word) === -1;
})
document.getElementById("suggestion").innerHTML = matchMaker.join(' ');

//Initial: somthng else wnet bonkers 
//Fix this typo: somthng wnet

</script>

Instead of creating a new p tag and id=suggesstion i would like to use map( ) and change initial with above mentioned styles. This is what i have done with map() so far and it is wrong

let matchMaker = initial.map(function(word){
 if( word !== apiSuggestion ){
    return `
        <span style="background-color:black"; color:"red">
         document.getElementById("initial").innerHTML = matchMaker.join(' ');
        </span>
          `
   } else {
         document.getElementById("initial").innerHTML = matchMaker.join(' ');
         }
});

Any help will be appreciated thank you so much !!!!!!