Как добавить классы к динамически создаваемым элементам?

Question

Прежде чем вы скажете, что это дубликат, я уже посмотрел некоторые ответы на тот же вопрос, но, похоже, ни один из них не решил мою проблему. У меня есть динамически созданная таблица из firebase. Он работает нормально, и все выглядит так, как должно, но у меня была идея добавить цвет к тексту в зависимости от того, собираются ли они достичь своей цели. Когда я попытался добавить оператор If / Else, он просто показывает первую таблицу в цвете, а все остальное - белый (цвет шрифта по умолчанию).

    salesBySold.on('value', function (snapshot) {
  snapshot.forEach(function (childSnapshot) {
    var key = childSnapshot.key;
    var childData = childSnapshot.val();

    let dayDividedByMonth = current_date/days_in_month;
    let tracking_sold_math = childData.cars_sold/dayDividedByMonth;

    if (tracking_sold_math < childData.goal) {
      $('#cars_sold').addClass('red-text');
    } else {
      $('#cars_sold').addClass('green-text')
    };

    $('#salesperson_tbody').append(`
        <tr>
            <td>${childData.name}</td>
            <td id='cars_sold'>${childData.cars_sold}</td>
            <td>${childData.goal}<td>
        </tr>
    `);


  });
});

Так что это мой код, и он просто добавляет цветной текст к первому, но все остальные по-прежнему цвета по умолчанию. Я хотел, чтобы они все были окрашены правильно

Answer 1

, так как вы устанавливаете класс id = "cars_sold" в цикле, это нормально, но он добавит класс ко всем ранее добавленным td, поэтому для решения вы должны сделать это

     salesBySold.on('value', function (snapshot) {
  snapshot.forEach(function (childSnapshot) {
    var key = childSnapshot.key;
    var childData = childSnapshot.val();

    let dayDividedByMonth = current_date/days_in_month;
    let tracking_sold_math = childData.cars_sold/dayDividedByMonth;
    var cls='';
    if (tracking_sold_math < childData.goal) {
      cls='red-text';
    } else {
     cls='green-text';
    };

    $('#salesperson_tbody').append(`
        <tr>
            <td>${childData.name}</td>
            <td id='cars_sold' class="${cls}">${childData.cars_sold}</td>
            <td>${childData.goal}<td>
        </tr>
    `);
  });
});