SVG (image-map) dynamic grid colour change

[GunasegaramDhuraisami]

Dear team,

I've been working on an Esri TB system.
I'm wondering, is there any way to dynamically change the colours of SVG file grids based on CSV pull data output in Survey123?

See the screenshot below of the S123 form that I've been developing. I wanna make dynamic grid colour changes based on the selected grid's sample positive status.

See SVG script below for your reference;

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="120" viewBox="0 0 700 120">

<style>
path {
fill: #cccccc;
stroke: #E37434;
stroke-width: 1.5;
}
path:hover {
fill: #ffcc00;
}
text {
font-family: Arial, sans-serif;
font-size: 12px;
fill: #000000;
}
</style>

<text x="70" y="25">1</text>
<text x="130" y="25">2</text>
<text x="190" y="25">3</text>
<text x="250" y="25">4</text>
<text x="310" y="25">5</text>
<text x="370" y="25">6</text>
<text x="430" y="25">7</text>
<text x="490" y="25">8</text>
<text x="550" y="25">9</text>
<text x="610" y="25">10</text>

<path id="1" d="M50,40 H90 V80 H50 Z"/>
<path id="2" d="M110,40 H150 V80 H110 Z"/>
<path id="3" d="M170,40 H210 V80 H170 Z"/>
<path id="4" d="M230,40 H270 V80 H230 Z"/>
<path id="5" d="M290,40 H330 V80 H290 Z"/>
<path id="6" d="M350,40 H390 V80 H350 Z"/>
<path id="7" d="M410,40 H450 V80 H410 Z"/>
<path id="8" d="M470,40 H510 V80 H470 Z"/>
<path id="9" d="M530,40 H570 V80 H530 Z"/>
<path id="10" d="M590,40 H630 V80 H590 Z"/>

</svg><div> <div>See image below of the S123 form;<div> <div><li-image width="400" height="185" alt=""></li-image></div></div></div></div>

Could you please let me know how I should achieve this?

Feel free to reach out to me if you have any questions.

Best regards,
Guna