SOURCE

document.getElementById("convert-down")
  .addEventListener("click", function() {
  let pattern = document.getElementById("row-pattern").value;
  document.getElementById("col-pattern").value = pattern.split('').join('\n');
  let name = document.getElementById("row-name").value;
  document.getElementById("col-name").value = name.split(/,\s*/).join('\n');
});

document.getElementById("convert-up")
  .addEventListener("click", function() {
  let name = document.getElementById("col-name").value;
  document.getElementById("row-name").value = name.replace(/\n/g, ',');
  
});

<div>
  pattern:
  <textarea id="row-pattern"></textarea>
  name:
  <textarea id="row-name"></textarea>
  <button id="convert-down">转换↓</button>
  <button id="convert-up">转换↑</button>
  <br />
  <textarea id="col-pattern"></textarea>
  <textarea id="col-name"></textarea>
</div>

#row-pattern, #row-name {
  width: 100%;
}

#col-pattern {
  width: 40px;
  height: 3500px;
}

#col-name {
  width: 200px;
  height: 3500px;
}