проблема с jquery но не совсем понял в чём конкретно

Смотрел лекцию про создание шахмат на jquery и тд.

Столкнулся с тем, что функция создания фигур не работает (как мне показалось проблема где-то тут но написано правильно как на видео ('#s' + coord) сам код

var divSquare = '<div id="s$coord" class="square $color"></div>';
var divFigure = '<div id="f$coord" class="figure">$figure</div>';

$(function () {
    addSquares();
    showFigureAt(32, 'r');
    showFigureAt(1, 'R');
});

function addSquares(){
    $('.board').html('');
    for (var coord = 0; coord <64; coord++)
    $('.board').append(divSquare
        .replace('coord', coord)
        .replace('$color',
            isBlackSquareAt(coord) ? 'black' : 'white'));
}

function showFigureAt(coord, figure){
    $('#s' + coord).html(divFigure
       .replace('$coord', coord)
       .replace('$figure', figure));
}

function isBlackSquareAt(coord) {
    return (coord % 8 + Math.floor(coord / 8)) % 2;
}

Ответы (1 шт):

Автор решения: Kirill

let divSquare = '<div id="s$coord" class="square $color"></div>',
  divFigure = '<div id="f$coord" class="figure">$figure</div>';

$(function () {
    addSquares();
    showFigureAt(32, 'r');
    showFigureAt(1, 'R');
});

function addSquares(){
    $('.board').html('');
    for (coord = 0; coord < 64; coord++)
    $('.board').append(divSquare
        .replace('$coord', coord) // ошибка была тут
        .replace('$color',
            isBlackSquareAt(coord) ? 'black' : 'white'));
}

function showFigureAt(coord, figure){
    let figureAdd = divFigure
      .replace('$figure', figure)
      .replace('$coord', coord);
    $('#s' + coord).html(figureAdd);
}

function isBlackSquareAt(coord) {
    return (coord % 8 + Math.floor(coord / 8)) % 2;
}
.board{width:160px;height:160px;border:1px solid #000}
.black{background-color:#000;width:20px;height:20px;float:left;position:relative}
.white{background-color:#fff;width:20px;height:20px;float:left;position:relative}
.figure{width:15px;height:15px;border-radius:50%;background-color:green;position:absolute}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="board"></div>

→ Ссылка