Problem loading global attributes (date-*) with jQuery

Question

Hi, guys from the O.R. Can you help me with my homework? I’m a beginner in jQuery and I need to solve an "enigma" that my teacher proposed to the class and allowed us to search here on the site.

Well, we have a list where are related some models of cars and their colors, where such information is stored within their respective global attributes "data-car" and "data-color". When the user selects a car from the list, it is directed to a form, which when sent, displays a message telling which car was chosen and its color. So far, so good!

The problem is that when the user sends the form and returns (through the Close button) to choose a new automobile in the list and sends a new form, the information displayed on the screen is always that of the first car chosen.

The correct would be that when a new car model was chosen, the car information in the form would be overwritten and the information on the screen would be that of the new car chosen, not the first.

We need to indicate a solution and point out why this is happening. Analyzing the code, we believe the problem is solved by changing the first lines of the 3 existing functions in jQuery that start in different ways:

Function 1: Choose the car

$(function() {

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

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

Function 3: Displays the car message which car was chosen

$(document).ready(function () {

Anyone who can help us and make this system work properly, displaying the message properly, will be of our enormous prestige and consideration.

Thank you very much!

$(function() {
  $(".cars").on('click', function() { //Função para escolher o carro
    var car = $(this).data('car'); //Escolhe o modelo do carro
    var color = $(this).data('color'); //Escolhe a cor do carro
    $('#carlist').addClass('d-none'); //Fecha a lista de carros
    $('#carinfo').removeClass('d-none'); //Abre o formulário
    $('#mycar').attr('data-car', car); //Altera o modelo do carro no formulário
    $('#mycar').attr('data-color', color); //Altera a cor do carro no formulário
  });
});

$(document).on('click', '.close', function() { //Função para fechar o formulário
  $('#carlist').removeClass('d-none'); //Aparece a lista de carros
  $('#carinfo').addClass('d-none'); //Some o formulário
  $('#mycar').attr('data-car', '0'); //Zera novamente o valor "car" do formulário
  $('#mycar').attr('data-color', '0'); //Zera novamente o valor "color" do formulário
});

$(document).ready(function() {
  $("#form").on('submit', function(e) {
    e.preventDefault(); //Evita submeter o formulário via GET		
    var car = $('#mycar').data('car'); //Carrega o carro escolhido
    var color = $('#mycar').data('color'); //Carrega a cor escolhida
    alert(car + " - " + color); //Resultado

  });
});

.cars {
  cursor: pointer;
}

.cars:hover {
  color: #FF0000;
}

.d-none {
  display: none;
}

.close {
  cursor: pointer;
}

.close:hover {
  color: #FF0000;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="carlist">
  <div class="cars" data-car="BMW" data-color="black">BMW (Black)</div>
  <div class="cars" data-car="Audi" data-color="white">Audi (White)</div>
  <div class="cars" data-car="Ferrari" data-color="red">Ferrari (Red)</div>
  <div class="cars" data-car="Lamborghini" data-color="yellow">Lamborghini (Yellow)</div>
</div>

<div id="carinfo" class="d-none">
  <span class="close">Close</span>
  <form id="form">
    <input type="text" id="mycar" data-car="0" data-color="0" autocomplete="off">
    <input type="submit" value="Send">
  </form>
</div>

Answer 1

It’s cool that you’re learning, it’s normal when we’re learning something to do some confusion, for example:

1 - You do not need to declare several times within the same scope $(document), because in the scope of the page only this statement $(function() that you’ve done enough.

2 - You mixed the methods a lot attr and data, causing, I believe, a little confusion for you at the time of manipulating the data.

3 - You don’t need to reset the form or clean anything, because you are already always taking the current data(chosen) with $(this).data('car') and $(this).data('color')

$(function() {
  $(".cars").on('click', function() { //Função para escolher o carro
    var car = $(this).data('car'); //Escolhe o modelo do carro
    var color = $(this).data('color'); //Escolhe a cor do carro
    $('#carlist').addClass('d-none'); //Fecha a lista de carros
    $('#carinfo').removeClass('d-none'); //Abre o formulário
    $('#mycar').data('car', car); //Altera o modelo do carro no formulário
    $('#mycar').data('color', color); //Altera a cor do carro no formulário
    $('#mycar').val(car + " - " + color) // Insere os dados no input
  });


  $('.close').on('click', function() { //Função para fechar o formulário
    $('#carlist').removeClass('d-none'); //Aparece a lista de carros
    $('#carinfo').addClass('d-none'); //Some o formulário
  });


  $("#form").on('submit', function(e) {
    e.preventDefault(); //Evita submeter o formulário via GET		
    var car = $('#mycar').data('car'); //Carrega o carro escolhido
    var color = $('#mycar').data('color'); //Carrega a cor escolhida
    alert(car + " - " + color); //Resultado

  });
});

.cars {
  cursor: pointer;
}

.cars:hover {
  color: #FF0000;
}

.d-none {
  display: none;
}

.close {
  cursor: pointer;
}

.close:hover {
  color: #FF0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="carlist">
  <div class="cars" data-car="BMW" data-color="black">BMW (Black)</div>
  <div class="cars" data-car="Audi" data-color="white">Audi (White)</div>
  <div class="cars" data-car="Ferrari" data-color="red">Ferrari (Red)</div>
  <div class="cars" data-car="Lamborghini" data-color="yellow">Lamborghini (Yellow)</div>
</div>

<div id="carinfo" class="d-none">
  <button class="close">Close</button>
  <form id="form">
    <input type="text" id="mycar" autocomplete="off">
    <input type="submit" value="Send">
  </form>
</div>