javascript - How to connect rows from different tables -

i have 2 tables , need allow user connect rows 1 table rows another, such as:

---

and later when user clicks on submit button, need information connections in such way:

---

[    {left: "pera lozac", right: "eve jakson"},     {left: "mika mikic", right: "jill smmith"},     {left: "zika zivac", right: "joh doe"},     {left: "dezurni krivac", right: "joh doe"},   ] 

how should go using html/javascript ?

check snippet below

usage : select(click) number of rows left table , select 1 row right table, click add connection, connection added , displayed below on page in form of javascript object.

note : selected rows highlighted in grey , highlighting removed when row unselected.

snippet

---

$(document).ready(function() {    var temp_color = '#dddddd';    $('tr').on('click', function() {      current_background = $(this).css('background-color');      $(this).toggleclass('selected');      if ($(this).hasclass('selected')) {        $(this).css('background-color', temp_color);      } else {        $(this).css('background-color', '#fff');      }    });    $('#add_conn').on('click', function() {      var left = [];      var right = [];      $('tr').filter(function() {        var match = 'rgb(255,255,255)';        var this_element = $(this).css('background-color');        if (hexc(this_element) != hexc(match)) {          $(this).css('background-color', '#ffffff');          $(this).toggleclass('selected');          var count = 0;          var string_test = "";          $(this).find('td').each(function() {            if (count < 2) {              string_test += " " + $(this).text();            }            count++;          });          if ($(this).closest('div').attr('id') == "one") {            left.push(string_test.trim());          } else if ($(this).closest('div').attr('id') == "two") {            right.push(string_test.trim());          }        }      });      var temp = $('#message').html();      var arr = [];      (l = 0; l < left.length; l++) {        arr.push({          left: left[l],          right: right[0]        });      }      temp = temp + json.stringify(arr);      $('#message').html(temp);    });    });    function hexc(colorval) {    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);    delete(parts[0]);    (var = 1; <= 3; ++i) {      parts[i] = parseint(parts[i]).tostring(16);      if (parts[i].length == 1) parts[i] = '0' + parts[i];    }    color = '#' + parts.join('');    return color;  }

#one {    position: absolute;    top: 10%;    left: 1%;  }  #two {    position: absolute;    top: 10%;    right: 35%;  }  table {    overflow: hidden;  }  tr {    background-color: #ffffff;  }  td {    padding: 10px;    position: relative;    outline: 0;  }  body:not(.nohover) tbody tr:hover {    background-color: #ffa;  }  .selected-bg-red {    background-color: red;  }  .selected-bg-green {    background-color: green;  }  #message {    position: absolute;    bottom: 10%;    left: 70%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="submit" id="add_conn" value="add connection" />  <div id="one">    <table border="1">      <tr>        <td>pera</td>        <td>lozac</td>        <td>11</td>      </tr>      <tr>        <td>mika</td>        <td>mikic</td>        <td>22</td>      </tr>      <tr>        <td>zika</td>        <td>zivac</td>        <td>33</td>      </tr>      <tr>        <td>dezurni</td>        <td>krivac</td>        <td>44</td>      </tr>    </table>    </div>  <div id="two">    <table border="1">      <tr>        <td>jill</td>        <td>smith</td>        <td>50</td>      </tr>      <tr>        <td>eve</td>        <td>jackson</td>        <td>94</td>      </tr>      <tr>        <td>john</td>        <td>doe</td>        <td>80</td>      </tr>    </table>    </div>  <div id="message">    </div>

check working sample here : fiddle

hope helps!