Way to update specific values in Bootstrap cards

Issue

I apologize for the amateur question here, however, I am experiencing some issues with a quick demo website I am creating for a friend.

The purpose of the site is to take the total of all "credit card values", and then divide it by the total amount of "points" there are to arrive at the "points per dollar"

Once that is done, I'd like to multiply the "points per dollar" by the total amount of "points" that are specified in the dropdown menu by the user, and then update all of the cards that have something selected to be the proper math with their point values.

I've successfully done all the math and created functions, but I am unsure how to actually apply it to the specific cards that need it.

I've created functions to do the math, and update the header numbers, just not apply it to the respective cards.

My code can be found here

My website is running on an express.js server with e.js as the templating engine, with bootstrap and jquery.

Any suggestions/help would be very much appreciated.

Solution

Easiest way to do this is to assign a unique id to each card so that you can write the corresponding data.

Then you can simply do something like:

$(`#${id} .whatever-class-name-for-points-element`).html(points);

It's a bit hard to tell what's going on in your code since it's not a minimum, reproducible example, but assuming you're trying to write one "points" value per employee, you could add id="<%= sm._id %>" or similar to each employee card.

FWIW, you probably want to use the id higher up (like on the card) and then use a data attribute (e.g. data-id="<%= sm._id %>") on the input.

Happy to give you further advice if you create a working, minimal CodePen/CodeSandbox/etc.

Answered By - Tim