The reason your code only applies to the first table, is because you are only selecting the first input with var number = document.querySelector('.nutrition-table__number');
You need to loop over all your tables, and add an event listener to each.
Here is an example of how this could work. The plugin pattern is from https://vanillajstoolkit.com/boilerplates/revealing-module-pattern/
/*!
* Revealing Constructor Pattern Boilerplate
* (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
*/
var NutritionTablesPlugin = (function () {
'use strict';
/**
* Create the Constructor object
*/
var Constructor = function (selector) {
//
// Variables
//
var publicAPIs = {};
var nodes = document.querySelectorAll(selector);
//
// Methods
//
var allNodes = function (callback) {
for (var i = 0; i < nodes.length; i++) {
callback(nodes[i], i);
}
};
/**
* A private method
*/
var updateNutritionValues = function (table, multipler, macros) {
var carbs = table.querySelector( '.nutrition-table__content--carbs');
var protein = table.querySelector('.nutrition-table__content--protein');
var fat = table.querySelector('.nutrition-table__content--fat');
var calories = table.querySelector('.nutrition-table__content--calories');
carbs.textContent = (macros.carbs / parseInt(multipler)).toFixed(1) + 'g';
protein.textContent = (macros.protein / parseInt(multipler)).toFixed(1) + 'g';
fat.textContent = (macros.fat / parseInt(multipler)).toFixed(1) + 'g';
calories.textContent = (macros.calories / parseInt(multipler)).toFixed(0) + ' cals';
};
/**
* Another public method
*/
publicAPIs.init = function (options) {
allNodes( function(node){
var originalValues = {
carbs: parseInt(node.querySelector('.nutrition-table__content--carbs').textContent),
protein: parseInt(node.querySelector('.nutrition-table__content--protein').textContent),
fat: parseInt(node.querySelector('.nutrition-table__content--fat').textContent),
calories: parseInt(node.querySelector( '.nutrition-table__content--calories').textContent)
};
node.addEventListener('change', function (e) {
updateNutritionValues(node, parseInt(e.target.value), originalValues);
});
});
};
//
// Return the Public APIs
//
return publicAPIs;
};
//
// Return the Constructor
//
return Constructor;
})();
document.addEventListener("DOMContentLoaded", function(event) {
var nutrition = new NutritionTablesPlugin('.nutrition-table');
nutrition.init();
});
And in your PHP code, you’ll want to use esc_html
for the carbs/fat/protein/calories attributes output. https://developer.wordpress.org/reference/functions/esc_html/