Dependant select option does not equal to another select option using checkbox

Using the example in this link, I have created a dependable car model select option, which is dependant to their respective car maker select option. I modified the code a bit to make it as a function, so I call the function code again and create another pair of select car maker option and its dependable car model option. These pair of select options work well independently.

Now I am putting a checkbox inbetween the pairs. If I checkbox is ticked, the car 2 maker option and car 2 model option should follow exactly as what I have set for car 1 maker / car 1 model option, and any change in car 1 maker / car 1 model, it will automatically reflect to car 2 maker / car 2 model as long as the checkbox is checked.

The problem is, while 'car 2 maker equals car 1 maker' works, the car 2 model does not equal car 1 model at all. It does not work whatsoever until if I uncheck the checkbox.

//Javascript part
function car_func(getcar) {
  var cars = ["Volvo", "Volkswagen", "BMW"];
  var sel = document.getElementById(getcar);
  var fragment = document.createDocumentFragment();
  cars.forEach(function(carz, index) {
    var opt = document.createElement('option');
    opt.innerHTML = carz;
    opt.value = carz;
    fragment.appendChild(opt);
  });
  sel.appendChild(fragment);
}
car_func('car');
car_func('car2');

var carsAndModels = {};
carsAndModels['Volvo'] = ['V70', 'XC60', 'XC90'];
carsAndModels['Volkswagen'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList(mainid, subid) {
  var carList = document.getElementById(mainid);
  var modelList = document.getElementById(subid);
  var selCar = carList.options[carList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  }
  var cars = carsAndModels[selCar];
  if (cars) {
    var i;
    for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
}

//JQuery part
$('select[id=car]').change(function() {
  if ($('input[id=car2car1]').is(':checked'))
    $('select[id=car2]').val($('select[id=car]').val());
});

$('select[id=carmodel]').change(function() {
  if ($('input[id=car2car1]').is(':checked'))
    $('select[id=carmodel2]').val($('select[id=carmodel]').val());
});

$('input[id=car2car1]').click(function() {
  if ($(this).is(':checked')) {
    $('select[id=car2]').val($('select[id=car]').val()).prop('readonly', true);
    $('select[id=carmodel2]').val($('select[id=carmodel]').val()).prop('readonly', true);
  } else {
    $('select[id=car2]').val('').prop('readonly', false);
    $('select[id=carmodel2]').val('').prop('readonly', false);
  }
});

Being new to Javascript, I would be very much appreciated if anyone can pinpoint anything wroing in the code, and help me correct it. Also, the JQuery part is me just googling around, copy and paste, and change it here and there. If anyone can rewrite that part so it is using JS instead of JQuery, I would be very grateful as well.Not that I don't like JQuery, it is just that I am more focusing towards JS. My full code here: JSFIDDLE

Thanks!