Why does changed value not display after breakpoint? Part 2

Question

A value in tab header changed through JS value is not persisting on @media breakpoint/accordion screen - although the one in the tabbed content area is persisting.

The js code:

function check_1_input(X, Y) {  
  var ids=X.split("_"); console.log(' X '+X+' id '+ids[1]); 
  var PX=document.getElementById(X); 
  var PY=document.getElementById(Y); 
  PX.childNodes[0].textContent = "Changed"; 
  PY.childNodes[0].textContent = "Changed";
}

which makes the changes is at the end of the html - not sure why it only works in that location.

The fiddle is https://jsfiddle.net/PhilB/077dbf37/10/

Answer 1

The problem you're having is that you're using element IDs in your check_1_input function. The responsive tab plugin clones your tab elements on initialization to have both horizontal and vertical tabs with different classes that get hidden or exposed based on the media width, but it keeps the IDs the same. Since your function is looking for elements using getElementById, it will only find the first one.

Ultimately, you end up with two different elements with the same ID, which is bad practice. Using a class as the selector instead of the ID fixes the problem. I used jQuery to select the classes instead of ID's since you have jQuery loaded. You may consider removing the ID's all together in the tab elements, since the responsive tab plugin is always going to clone them and result in an invalid DOM (two elements with the same ID).

See my updated version of your fiddle here.