javascript – How do I fill certain table cells? html, node.js

I have a conditional 5×5 table and I get 2 values: 1,2 – cell cordinates
I want to decorate 3 adjacent cells relative to the received coordinates

Example:
A1 = 2
A2 = 3
Therefore, cells with ID 23 33 43 53 will be colored

<table<tr>
                <td id="11">11</td>
                <td id="12">12</td>
                <td id="13">13</td>
                <td id="14">14</td>
                <td id="15">15</td>
                <td id="16">16</td>
                <td id="17">17</td>
                <td id="18">18</td>
                <td id="19">19</td>
                <td id="20">20</td>
            </tr>
            <tr>
                <td id="21">21</td>
                <td id="22">22</td>
                <td id="23">23</td>
                <td id="24">24</td>
                <td id="25">25</td>
                <td id="26">26</td>
                <td id="27">27</td>
                <td id="28">28</td>
                <td id="29">29</td>
                <td id="30">30</td>
            </tr>
            <tr>
                <td>3</td>
                <td id="31">31</td>
                <td id="32">32</td>
                <td id="33">33</td>
                <td id="34">34</td>
                <td id="35">35</td>
                <td id="36">36</td>
                <td id="37">37</td>
                <td id="38">38</td>
                <td id="39">39</td>
                <td id="40">40</td>
            </tr>
            <tr>
                <td>4</td>
                <td id="41">41</td>
                <td id="42">42</td>
                <td id="43">43</td>
                <td id="44">44</td>
                <td id="45">45</td>
                <td id="46">46</td>
                <td id="47">47</td>
                <td id="48">48</td>
                <td id="49">49</td>
                <td id="50">50</td>
            </tr>
            <tr>
                <td id="51">51</td>
                <td id="52">52</td>
                <td id="53">53</td>
                <td id="54">54</td>
                <td id="55">55</td>
                <td id="56">56</td>
                <td id="57">57</td>
                <td id="58">58</td>
                <td id="59">59</td>
                <td id="60">60</td>
            </tr>
            <tr>
</table>
    <form name="sell">
        <table>
            <tr><td><b>A1 </b></td>
                <td><input name="A1" SIZE = 20
                           onblur="this.value=this.value.toUpperCase()"></td></tr>
            <tr><td><b>A2 </b></td>
                <td><input name="A2" SIZE = 20
                           onblur="this.value=this.value.toUpperCase()"></td></tr>
        </table>
        <input TYPE="button" value="Готово" onClick="draw()">
    </form>
    <script src="/ship.js"></script>

ship.js:

function draw(){
    if (typeof document !== "undefined"){
        let A1 = document.sell.A1.value;
        let A2 = document.sell.A2.value;
        let A = A1 + A2;
        for (let i = 0; i < 3; i++){
            let element = document.getElementById(A)
            element.style.background = 'black'
            A = A + 10
        }

    }
}
draw()

For some reason, only the first received cell 23 is decorated, although the cycle start
The code is executed in the same environment in WebStorm -> Node.js project