Absolute138

getBoundingClientRect()

<div class="container">
     <a href="#" class="show">Первая ссылка</a>
     <div hidden class="content">
        <div>А</div>
        <div>Б</div>
        <div>В</div>
    </div>
  </div>
  <div class="container">
     <a href="#" class="show">Вторая ссылка</a>
     <div hidden class="content">
        <div>Г</div>
        <div>Д</div>
        <div>Е</div>
    </div>
  </div>
  <div class="container">
     <a href="#" class="show">Третья ссылка</a>
     <div hidden class="content">
        <div>Е</div>
        <div>Ж</div>
        <div>Е</div>
    </div>
  </div>

$('.show').on('click', function(){
     $('.container > .content').attr('hidden','');
     $(this).next('.content').prop('hidden', false);
  });

<div>
  <button onclick="pressButtonA()">Кнопка 1</button>
  <button onclick="Again()">Сборосить</button>
</div>
  <div id="links">
    
</div>

var arr = new Array();
arr[411] = [{id: 25-1, title: 'GA-1200 8MM', pdf: 'ссылка.pdf'}, 
            {id: 25-2, title: 'GA-1232 9MM', pdf: 'ссылка.pdf'},
            {id: 25-3, title: 'GA-1441 13MM', pdf: '131.pdf'}];

function pressButtonA(){
  
  var links = document.getElementById('links');
  arr.forEach(function(v){  
    if(typeof v == 'object'){
      v.forEach(function(v){
        if(typeof v == 'object'){
          var a = document.createElement('a');
          a.href = v.pdf;
          a.id = v.id;
          a.textContent = v.title;
          links.appendChild(a);
        }
      })
    }
    
  });

}
function Again(){
   var a = document.getElementById('links');
   while(a.firstChild){
     a.removeChild(a.firstChild);
   }
}

Оно?

<table>
  <tr>
    <td onclick="this.textContent = 'автозаполнение';" contenteditable>Ячейка 1 </td>
    <td> Ячейка 2 </td>
  </tr>
  </table>

Набросал на буквально на коленке. Если подключен jQuery, то лучше через него т.к. метод remove() в старых браузерах недоступен. Ну или полифил. Или через removeChild переписать - еще лучше.

<select id="styles">
  <option>None</option>
<option data-url="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">Светлый</option>
<option data-url="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Темный</option>
</select>
<script>
  function createStyle(url){
    var style = document.createElement('link');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    style.id = 'currentstyle';
    style.href = url;
    return style;
  }
  document.getElementById('styles').onchange = function(){
    var el = document.getElementById('currentstyle');
    if(el !== null){
      el.remove();
    }
    var obj = this.options[this.selectedIndex].dataset;
    if(!Object.keys(obj).length){
      return;
    }
    document.head.appendChild(createStyle(obj.url));
  }
</script>

Здесь вариантов много.

// getElementById s1
document.getElementById('s1').onchange = function(){
  document.getElementById('output').textContent = this.value;
};

// querySelector s2
document.querySelector('#s2').onchange = function(){
  document.querySelector('#output').textContent = this.value;
};

//jQuery для обоих select'ов
$('select[id^="s"]').on('change', function(){
  $('#output').text(this.value);
});