functions – Problem loading global attributes (data- *) with jQuery

Hi, people bones. Can you help me with my homework?
I am a beginner in jQuery and I need to solve a "puzzle" that my teacher has proposed to the class and allowed us to search here on the site.

Problem link in JSFiddle.

Well, we have a list listing some car models and their colors, where this information is stored in their respective attributes of global data and color data.
When the user selects a car from the list, he is directed to a form that, when sent, displays a message indicating which car was chosen and its color. Until here everything is fine!

The problem is that when the user submits the form and returns (via the Close button) choose a new car from the list and sends a new form, the information displayed on the screen are always those of the first car selected.

The good thing would be that, when a new car model was chosen, the information on the car in the form would be overwritten and the information displayed on the screen would be those of the new car chosen rather than the first one.

We must indicate a solution and indicate why this is happening.
By analyzing the code, we think that the problem is solved by modifying the first lines of the 3 jQuery functions that start in different ways:

Function 1: Choose the car

$ (function () {

Function 2: Close the form and return to the car list

$ (document) .on (& # 39 ;, & # 39; .close & # 39 ;, function () {

Function 3: Displays the message of the car that has been chosen

$ (document) .ready (function () {

Anyone who can help us and ensure that this system works properly by displaying the message correctly will be of our enormous prestige and consideration.

We have stored the problem in JSFiddle.

thank you so much