html - How to use checked values in table to make another table using javascript

Question

I have creating a html table with javascript function in a page. and i need to create a checkbox in each of the last column in each row from my table1 and if the checkbox is checked then the elements of table1 is to be added to table2 without checkbox. I don't know how to do that. anyone can help me? please give me an example for that.

the code used by me is this:-

const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
window.addEventListener("load", function() {
  html.push("<table><tbody>");
  for (var i = 0; i < a.length; i++) {
    j = i + 1;
    html.push(`<tr><td>${j}</td><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td>`);
    html.push(`<td><input type="checkbox"  value="${i}" name="code"></td></tr>`)
  }
  html.push("</tbody></table>");
  document.getElementById("container").innerHTML = html.join("");
});

$(document).ready(function() {
  var y = 0;
  $("input[type='checkbox']").onclick(function() {
    var code1 = $("input[name='code']:checked").val();
    for (var x = 0; x < code1.length; x++) {
      if ($(this).prop("checked") == true) {
        window.addEventListener("load", function() {
          html1.push("<table><tr>");
          y = y + 1;
          html1.push(`<tr><th>${y}</th><td>${a[x]}</td><td>${b[x]}</td><td>${c[x]}</td></tr>`);
          html.push("</table>");
        });
      });
  });
  document.getElementById("result").innerHTML = html1.join("");
});

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

Answer 1

This is likelier closer to what you wanted

I do suggest you do not just throw some guessed code together - the code you posted was a mess of event handlers, DOM handling and jQuery

const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
let html1 = [];
$(function() {
  html.push("<table><tbody>");
  for (var i = 0; i < a.length; i++) {
    j = i + 1;
    html.push(`<tr><td>${j}</td><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td>`);
    html.push(`<td><input type="checkbox" value="${i}" name="code"></td></tr>`)
  }
  html.push("</tbody></table>");
  document.getElementById("container").innerHTML = html.join("");

  $("input[type='checkbox']").on("click", function() {
    if (this.checked) {
      let y = 0;
      const code1 = this.value
      for (var i = 0; i < code1; i++) {
        html1.push("<table><tbody>");
        y = y + 1;
        html1.push(`<tr><th>${y}</th><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td></tr>`);
        html1.push("</tbody></table>");
      }
    }
    document.getElementById("result").innerHTML = html1.join("");
  });

});

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