title: Collect list item according to name and store in array or object
body: <p>I have a dual list in which you get an option to add left list item in right list. And right list is a form. Now i am stuck at a problem where when user click the submit button all the li in right list and there inside values get store in an object with there specific name div id name. I have worked on it for 5 days now but unable to collect data according to div id name. Like </p>
  
  <pre><code>&lt;div id="name1"&gt; 
  &lt;input id="tts" type="text" value="${CTLIST.tts}"&gt; s&lt;br&gt;
   &lt;input id="topic_level" type="text" value="${CTLIST.topic_level}"&gt;&lt;br&gt; 
   &lt;label&gt;${Object.keys(CTLIST)[4]}&lt;/label&gt; &lt;input id="to_be_shown_individually" type="checkbox" ${(CTLIST.to_be_shown_individually &amp;&amp; 'checked')}&gt; &lt;br&gt;
    &lt;label&gt;${Object.keys(CTLIST)[3]}&lt;/label&gt;&lt;input id="check_for_geometry" type="checkbox" ${(CTLIST.check_for_geometry &amp;&amp; 'checked')}&gt;&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Suppose this is an li of right list.
  I want data to get stored like </p>
  
  <pre><code>{
  [name : name1,
  tts.value : 10, 
  ifcheckboxcheck : true,
  ],
  [name : name2,
  tts.value : 10, 
  ifcheckboxcheck : true,]
  }
  </code></pre>
  
  <p>HEre is my html </p>
  
  <pre><code>
      &lt;section class="ctList"&gt;
  
          &lt;div class="container"&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;div class="dual-list list-left col-md-5"&gt;
                      &lt;div class="well text-right"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-10"&gt;
                                  &lt;div class="input-group"&gt;
                                      &lt;span class="input-group-addon glyphicon glyphicon-search"&gt;&lt;i class="fa fa-search"
                                              aria-hidden="true" style="padding-right: 20px;"&gt;&lt;/i&gt;&lt;/span&gt;
                                      &lt;input type="text" name="SearchDualList" class="form-control"
                                          placeholder="search" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-2"&gt;
                                  &lt;div class="btn-group"&gt;
                                      &lt;a class="btn btn-default selector" title="select all"&gt;&lt;i
                                              class="glyphicon glyphicon-unchecked"&gt;&lt;/i&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;ul class="list-group" id="La"&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="list-arrows col-md-1 text-center"&gt;
                      &lt;button class="btn btn-default btn-sm move-left"&gt;
                          &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;i class="fa fa-arrow-left"
                                  aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/button&gt;
  
                      &lt;button class="btn btn-default btn-sm move-right"&gt;
                          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;i class="fa fa-arrow-right"
                                  aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
  
                  &lt;div class="dual-list list-right col-md-5"&gt;
                      &lt;div class="well"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-2"&gt;
                                  &lt;div class="btn-group"&gt;
                                      &lt;a class="btn btn-default selector" title="select all"&gt;&lt;i
                                              class="glyphicon glyphicon-unchecked"&gt;&lt;/i&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-10"&gt;
                                  &lt;div class="input-group"&gt;
                                      &lt;input type="text" name="SearchDualList" class="form-control"
                                          placeholder="search" /&gt;
                                      &lt;span class="input-group-addon glyphicon glyphicon-search"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;form id="rightData" method="POST"&gt;
                              &lt;ul class="list-group" id="accordian"&gt;
  
                                  &lt;!-- right list  --&gt;
  
                              &lt;/ul&gt;
                              &lt;input type="submit" value="submit" name="submit"&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  
  
  </code></pre>
  
  <p>This is my js  which is obviously not working </p>
  
  <pre><code>
          $('.content').hide();
          $('.listelement').on('click', function () {
              if (!($(this).children('.content').is(':visible'))) {
                  $('.content').slideUp();
                  $(this).children('.content').slideDown();
              } else {
                  $('.content').slideUp();
              }
          });
  
          $(function () {
  
              $('body').on('click', '.list-group .list-group-item', function () {
                  $(this).toggleClass('active');
              });
              $('.list-arrows button').click(function () {
                  var $button = $(this), actives = '';
                  if ($button.hasClass('move-left')) {
                      actives = $('.list-right ul li.active');
                      actives.clone().appendTo('.list-left ul');
                      actives.remove();
                  } else if ($button.hasClass('move-right')) {
                      actives = $('.list-left ul li.active');
                      actives.clone().appendTo('.list-right ul');
                      actives.remove();
                  }
              });
              $('.dual-list .selector').click(function () {
                  var $checkBox = $(this);
                  if (!$checkBox.hasClass('selected')) {
                      $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active right');
                      $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
                  } else {
                      $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
                      $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
                  }
              });
              $('[name="SearchDualList"]').keyup(function (e) {
                  var code = e.keyCode || e.which;
                  if (code == '9') return;
                  if (code == '27') $(this).val(null);
                  var $rows = $(this).closest('.dual-list').find('.list-group li');
                  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
                  $rows.show().filter(function () {
                      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                      return !~text.indexOf(val);
                  }).hide();
              });
  
          });
  
          ////printing properties
  
          $(function () {
              var ctList = [];
              var ctRight = [];
  
              var $tBody = $("#La");
              var $rbody = $("#accordian");
  
              $.getJSON('https://api.myjson.com/bins/d6n2a', function (data) {
                  data.topic_info.qt_ct_connection.map(value =&gt; {
                      value.ct_list.forEach((CTLIST) =&gt; {
  
                          $tBody.append(`&lt;li class="list-group-item" id="rl"&gt;
                          &lt;span id="nameOfCt"&gt;${CTLIST.ct}&lt;/span&gt;
                                  &lt;a href="#${CTLIST.ct}" class="btn btn-danger show" data-toggle="collapse"&gt;View More&lt;/a&gt;
  
                           &lt;div id="${CTLIST.ct}" class="collapse valueDiv"&gt;
                                &lt;label&gt;${Object.keys(CTLIST)[2]}&lt;/label&gt; &lt;input id="tts" type="text" value="${CTLIST.tts}"&gt;&lt;br&gt;
                                &lt;label&gt;${Object.keys(CTLIST)[1]}&lt;/label&gt; &lt;input id="topic_level" type="text" value="${CTLIST.topic_level}"&gt;&lt;br&gt; 
                                  &lt;label&gt;${Object.keys(CTLIST)[4]}&lt;/label&gt; &lt;input id="to_be_shown_individually" type="checkbox" ${(CTLIST.to_be_shown_individually &amp;&amp; 'checked')}&gt; &lt;br&gt;
                                &lt;label&gt;${Object.keys(CTLIST)[3]}&lt;/label&gt;&lt;input id="check_for_geometry" type="checkbox" ${(CTLIST.check_for_geometry &amp;&amp; 'checked')}&gt;&lt;br&gt;
                       &lt;/div&gt;        
  
                          &lt;/li&gt;`);
  
  
  
                      });
                  })
              })
          })
  
  
  
      &lt;/script&gt;
  
  
  
      &lt;script&gt;
          var SendDataObject = {};
  
  
          $("#rightData").on("submit", function (event) {
              event.preventDefault();
              var IDs = [];
              var list = {};
               var data = {} ;
  var tts = {};
              let rightListLength;
              rightListLength = $('#rightData li').length;
              var tts = [];
           $("#rightData li").each(function (){
              $("#rightdata").find("div").each(function(){ IDs.push(this.id); 
              $('#rightData').find("#tts").each(function () { IDs.push(this.value)})
           })
          });
  
              // $('#rightData li').each(function () {
              //  var a =  $(this).html();
              //     console.log("i am writin second", list[$(this).attr('value')] = $(this).html());
              //     console.log(list[$(this).attr('id')] = $(this).html())          
              // });
  console.log(IDs)
  console.log(tts)
  
  CSS
  </code></pre>
  
  <pre><code>&lt;style&gt;
      .ctList {
          padding-top: 20px;
      }
  
      .ctList .dual-list .list-group {
          margin-top: 8px;
      }
  
      .ctList .list-left li,
      .list-right li {
          cursor: pointer;
      }
  
      .ctList .list-arrows {
          padding-top: 100px;
      }
  
      .ctList .list-arrows button {
          margin-bottom: 20px;
      }
  
      .dual-list.list-left .well li.list-group-item .show {
          display: none;
      }
  &lt;/style&gt;
  </code></pre>
  
  <pre><code>
  This is rendered HTML in browser if ony one li in right list . ANd if two li then another HTML will be rendered by diffrent i name coming from json and value .
  </code></pre>
  
  <p>point_in_first_quad
                                  View More</p>
  
  <pre><code>                     &lt;div id="point_in_first_quad" class="collapse valueDiv"&gt;
                            &lt;label&gt;tts&lt;/label&gt; &lt;input id="tts" type="text" value="10"&gt;&lt;br&gt;
                            &lt;label&gt;topic_level&lt;/label&gt; &lt;input id="topic_level" type="text" value="capable"&gt;&lt;br&gt; 
                              &lt;label&gt;to_be_shown_individually&lt;/label&gt; &lt;input id="to_be_shown_individually" type="checkbox" checked=""&gt; &lt;br&gt;
                            &lt;label&gt;check_for_geometry&lt;/label&gt;&lt;input id="check_for_geometry" type="checkbox" checked=""&gt;&lt;br&gt;
                   &lt;/div&gt;       
  </code></pre>
  
  <pre><code>
  </code></pre>