How to refer to a group of equations in html/Mathjax

I am using MathJax on my website. When I refer to a single equation with label, the number turns out correct. However, when I write a group of equations like below,

\begin{equation} \label{equation-example}
\begin{aligned}  
A &= B + C \\
  &= D
\end{aligned}
\end{equation}

the number reference somewhere else displays Eq (???). On the other hand, when I write a group of equations like below,

$$
\begin{equation}
\begin{aligned}
A &= B + C \\
&= D
\end{aligned}
\end{equation}\label{equation-example}
$$

the number referencing is correct (e.g., Eq (4)). I know that $$ is from Tex and shouldn’t be encouraged. This code looks like a bad practice anyway.

What is the proper way of referring to a group of equations in html/MathJax?