Problema ao carregar atributos globais (data-*) com jQuery

Oi, pessoal da SO. Podem me ajudar com meu dever de casa? Sou iniciante em jQuery e preciso resolver um “enigma” que meu professor propôs para a turma e nos permitiu pesquisar aqui no site.

Link do problema no JSFiddle.

Bom, temos uma lista onde são relacionados alguns modelos de carros e suas cores, onde tais informações são armazenadas dentro de seus respectivos atributos globais “data-car” e “data-color”. Quando o usuário seleciona algum automóvel da lista, é direcionado a um formulário, que ao ser enviado, exibe uma mensagem dizendo qual foi o carro escolhido e sua cor. Até aqui, tudo bem!

O problema é que quando o usuário envia o formulário e retorna (através do botão Close) para escolher um novo automóvel na lista e envia um novo formulário, a informação exibida na tela é sempre a do primeiro automóvel escolhido.

O correto seria que quando fosse escolhido um novo modelo de automóvel, as informações do carro no formulário fossem sobrescritas e a informação na tela fosse a do novo carro escolhido, e não o primeiro.

Precisamos indicar uma solução e apontar o porquê isto está acontecendo. Analisando o código, acreditamos que o problema seja resolvido alterando as primeiras linhas das 3 funções existentes em jQuery que se iniciam de maneiras diferentes:

Função 1: Escolhe o carro

$  (function() { 

Função 2: Fecha o formulário e retorna para a lista de carros

$  (document).on('click', '.close', function(){ 

Função 3: Exibe a mensagem de carro qual carro foi o escolhido

$  (document).ready(function () { 

Quem puder nos ajudar e fazer com que esse sistema funcione de maneira correta, exibindo a mensagem adequadamente, será de nosso enorme prestígio e consideração.

Armazenamos o problema no JSFiddle.

Muito obrigada!