表格行中包含输入字段的问题，无法为其设置值

Question

我陷入了困境。我已经尽力摆脱这种情况，但无法解决。我正在针对表行设置输入字段的值，但值 正在设置隐藏行。我已经在下面进一步解释了此代码。

我正在通过此功能克隆表行：

      $('.table-add').click(function () {

        // var $tr = $TABLE.find('tr.hide');
        // var $clone = $tr.clone(true).addClass('hide table-line');

        // $tr.removeClass('hide table-line');

        var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
        hid = $TABLE.find('tr.hide').attr('id');
        // //Assigning every table row a unique ID
        var max=0;
        $('table').find('tr').each(function(){
            var id=parseInt($(this).attr('id'));
            if (id>=max){
               max = id;
             }
         });

         //cloning row with new ID  
         $clone.attr('id', parseInt(max)+1);
        // $clone.find('input.myinput').tagsinput('removeAll');
         // $TABLE.find('table').append($tr);

         $clone.appendTo( $('#'+hid).parent() );
        });

每行都有两个td字段，其中一个是图标，模态形式在其上打开：第二个是tagsinput输入字段。请注意，隐藏行也同时包含两个tds。

       <td>
            <span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span>
      </td>

     <td>    
          <input contenteditable="false" name="unique_tag" 
          class = "myinput" id="tagsinputid" data-role="tagsinput"/> 
     </td>

td标签下面的标签类似于针对现有行的标签。

          <td>    
          <input contenteditable="false" name="unique_tag" value= "{{ d|get_item:"unique_tag" }}" 
          class = "myinput" id="tagsinputid" data-role="tagsinput" />
          </td>

对于隐藏的tr行，就像这样：

        <td>    
          <input name="unique_tag" 
          class = "myinput" id="tagsinputid" data-role="tagsinput"/> 
        </td>

现在在模式表单提交按钮上，我想获取对其单击的表格行：

例如：

Table 
    row1 + 
    row2 +
    row3 + (hidden row)

在单击第二行+图标时，我想获取row2 id，这是我针对此代码并在针对该行输入的标签中的下一个td中设置值，但这仍然无法正常工作。

      //click on span1 element
      $('.modal-body-inner').on("click", "span.span1", function(){
          var t = $(this).text();               
          $(this).toggleClass("myclass");
      });

      //Click on model box
      $('tr #modelbox').click(function() {
         var $row = $(this).closest('tr');
         var tbid = $row.attr('id'); // table row ID
         $('#myModal').data('current', tbid); //save current tbid
         var fieldOption = []
         $row.find('#words option').each(function() { fieldOption.push($(this).val()); });
         console.log(fieldOption);

          $('.modal-body-inner').html('');
          for(var i = 0, size = fieldOption.length; i < size ; i++){
                var item = fieldOption[i];
                $('.modal-body-inner').append("<span class=span1 > "+ item + "</span>");
          }
      });



      $('#modelformbuttonclick').click(function() {
          var tableRowId =  $('#myModal').data('current');
          c = '#' + tableRowId;
          //removing all tags if anyone updates tags
          $(c+ ' input.myinput').tagsinput('removeAll');
          var count=1; var color = ["Europe","America","Australia","Africa","Asia", "Asia2", "Africa2"];

          $('.modal-body-inner span.myclass').each(function() {
              c = '#' + tableRowId;
              var randomNumber = Math.floor(Math.random()*color.length);
              $(c + '  input.myinput').tagsinput('add', { "name": "tagsdata", "value": $(this).text() , "text": $(this).text(), "continent": color[randomNumber]});
              count = count+1;
          });
          submitForm();
      });



<!-- Modal Form -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Choose Remarks for your students </h4>
    </div>
    <div class="modal-body">
    <!-- <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> -->
    <div class="modal-body-inner"></div>
    </div>
    <div class="modal-footer">
      <!-- <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button> -->
      <button type="button" id = "modelformbuttonclick" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

执行此代码后，在该行（row2）上看不到我在tagsinput输入字段中设置的值，但在隐藏行（row3 +）内设置了该值，这使我感到困惑，为什么会这样，我做了什么在这里错了。通过调试此代码，我得到了c的价值 右边是2而不是3，但是为什么它没有在第二行显示标签输入值，而是在第三行显示标签输入值。