[html, JS] I want to get the contents of another id or change the contents of a specific id dynamically.

Hello! I am a liberal arts student who is studying the front end as a hobby.

It is difficult to manage time to study in earnest, so I am studying with my acquaintance in a study method.

As a result, there were parts where I couldn't answer even if I wrapped my head, so I left a question like this.

I ask for your help me! ㅠ<

What I want to make is simple!

Pressing each X under 'Select' fills the contents of the bottom table correctly.

X changes to O. (If another row is selected, it is X)

List of students class of Name Choice 1122333(id="number1") Kim XX (id="name1") X (id="choice1", onclick="choice(1)) 1222333(id="number2") This XX (id="name2") X (id="choice1" onclick="choice(2)) 1322333(id="number3") Park XX (id="name3") X (id="choice1" onclick="choice(3))

a chosen student class of Name N/A (id="choicenumber") N/A (id="choicename")

function choice(n) {
 $("#choicenumber").val("#number" + "n");
 $("#choicename").val("#name" + "n");
 $(".choice").text(X);
 $("#choice" + "n").text(O);
}

vararrName = ["", "KimXX", "LeeXX", "ParkXX"]
function choice(n) {
    window.open("selected.html");
    var selected = choice[n];
    $("#choicename").val("arrName[n]");
};
// I want to make the result table appear in a new window, but it didn't work out
// First of all, I would like to solve the problem of operating within one HTML.

Js has written this and that, and I think it's going to be close to solving it, but it's the above two ways.

When you operate choice (1), the contents of number1 and name1 are filled in choice number and choice name

If I operate the choice (2), I want the contents of number2 and name2 to be filled in the choice number and choice name, respectively.

Is it wrong to use .val() or should I use something other than .val()?

I also wrote it on jsfiddle. I'd appreciate it if you watched itㅠ<

http://jsfiddle.net/yeonha871/whxLovka/23/