$$ and \ \ are not rendering for math equation in browser using MathJax - browser

Question

I'm rendering mathematical equation in browser using MathJax with following code :
Dynamic HTML content :
<td style="vertical-align: top; text-align: left; width: 95%;">
<span>$$If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as$$<br>
$$f(x) = x^2 +ax + 6 \ \ \ \ for \ \ 0 <x < 2$$<br>
$$= 3x +2 \ \ \ \ \ \ for \ 2<x<4$$<br>
$$= 2ax + 5b \ \ \ \ \ \ \ for \ 2<x<8$$<br>
Find <em>a</em> and <em>b</em></span>
</td>
Mathjax Config. :
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\[","\]"] ],
},
"HTML-CSS": {
linebreaks: {
automatic: true
}
}
});
</script>
<script type="text/javascript" async src = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
Output :
Here we can see that text till 'defined as' rendered perfectly. But whats wrong with remaining. If anybody have solution, then please !
Thanks !
UPDATE
As per suggestion given by Niyoko and Peter, I've replace '<' with '<' from dynamically generated HTML string
<td style="vertical-align: top; text-align: left; width: 95%;">
<span>$$If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as$$<br>
$$f(x) = x^2 +ax + 6 \ \ \ \ for \ \ 0 <x < 2$$<br>
$$= 3x +2 \ \ \ \ \ \ for \ 2<x<4$$<br>
$$= 2ax + 5b \ \ \ \ \ \ \ for \ 2<x<8$$<br>
Find <em>a</em> and <em>b</em></span>
</td>
But its not working and breaking whole expression rendering.

Answer 1

If you want to align equations, don't use spaces like that. Use \\ to create line break, wrap all equations with \begin{align} and \end{align} and mark align point with &. Your < sign also conflict with html tag. Use < and > instead.
<div>
$$
If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as \\
\begin{align}
f(x) & = x^2 +ax + 6 \ \ \ \ for \ \ 0<x<2 \\
& = 3x +2 \ \ \ \ \ \ for \ 2<x<4 \\
& = 2ax + 5b \ \ \ \ \ \ \ for \ 2<x<8
\end{align}
$$
Find $a$ and $b$
</div>
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\[","\]"] ],
},
"HTML-CSS": {
linebreaks: {
automatic: true
}
}
});
</script>
<script type="text/javascript" async src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
If you cannot change HTML, then just replace < with <
<td style="vertical-align: top; text-align: left; width: 95%;">
<span>$$If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as$$<br>
$$f(x) = x^2 +ax + 6 \ \ \ \ for \ \ 0 <x < 2$$<br>
$$= 3x +2 \ \ \ \ \ \ for \ 2<x<4$$<br>
$$= 2ax + 5b \ \ \ \ \ \ \ for \ 2<x<8$$<br>
Find <em>a</em> and <em>b</em></span>
</td>
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\[","\]"] ],
},
"HTML-CSS": {
linebreaks: {
automatic: true
}
}
});
</script>
<script type="text/javascript" async src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>