追加時にすべての入力テキストボックス値をクリアする

Question

私が望むのは、追加をクリックすると、すべてのテキストボックスに空白値を追加して追加機能が正しく動作しているが、追加時に入力ボックスに値を追加するが、テキストボックスの値をクリアします。

<table> 
    <tbody> 
    <tr class="topdivdata"> 
    <td> <input type="text" value="First Name"></td> 
    <td> <input type="text" value="Last Name"></td> 
    <td> <input type="text" value="Mobile Number"></td> 
    </tr> 
    <tr role="row" class="odd"> 
    <td> 
    <span class="btn btn-xs cic" id="addnewunit"> 
    <i class="icon-plus"></i>+ Add More</span> 
    </td> 
    </tr> 
    </tbody> 
    <tbody id="addmoreunit"></tbody> 
    </table> 

    <script src="https://code.jquery.com/jquery-1.12.3.js"></script> 

    <script> 
    unitcount=1; 
    $('#addnewunit').click(function() 
       { 
       var topdiv = $('.topdivdata').html(); 
       var refresdiv=topdiv; 
      $('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');  
    unitcount++; 
     var value = $('.target').val(); 
        $('.list').val(value); 
        $('.removes1').click(function() 
         { 
          $(this).parent().remove(); 
         }); 
    }); 

    </script> 

i want to when i click on add more append all text box with blank value add more function properly working but at append time input box upend with value but i want to clear text box value 
 
<table> 
 
    <tbody> 
 
    <tr class="topdivdata"> 
 
    <td> <input type="text" value="First Name"></td> 
 
    <td> <input type="text" value="Last Name"></td> 
 
    <td> <input type="text" value="Mobile Number"></td> 
 
    </tr> 
 
    <tr role="row" class="odd"> 
 
    <td> 
 
    <span class="btn btn-xs cic" id="addnewunit"> 
 
    <i class="icon-plus"></i>+ Add More</span> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody id="addmoreunit"></tbody> 
 
    </table> 
 
    
 
    <script src="https://code.jquery.com/jquery-1.12.3.js"></script> 
 
    
 
    <script> 
 
    unitcount=1; 
 
    $('#addnewunit').click(function() 
 
    \t \t \t { 
 
    \t \t \t var topdiv = $('.topdivdata').html(); \t 
 
    \t \t \t var refresdiv=topdiv; 
 
    \t \t $('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>'); \t 
 
    unitcount++; 
 
    \t var value = $('.target').val(); 
 
    \t \t \t \t $('.list').val(value); 
 
    \t \t \t \t $('.removes1').click(function() 
 
    \t \t \t \t \t { 
 
    \t \t \t \t \t \t $(this).parent().remove(); 
 
    \t \t \t \t \t }); 
 
    }); 
 
    \t \t 
 
    </script>

Answer 1

<table> 
<tbody> 
    <tr class="topdivdata"> 
     <td> 
      <input type="text" value="First Name"> 
     </td> 
     <td> 
      <input type="text" value="Last Name"> 
     </td> 
     <td> 
      <input type="text" value="Mobile Number"> 
     </td> 
    </tr> 
    <tr role="row" class="odd"> 
     <td> 
      <span class="btn btn-xs cic" id="addnewunit" style="cursor:Pointer;"> 
       <i class="icon-plus"></i>+ Add More 
      </span> 
     </td> 
    </tr> 
</tbody> 
<tbody id="addmoreunit"></tbody> 
</table> 

とスクリプト

var unitcount = 1; 
$('#addnewunit').click(function() { 

    //Here i cloned your topDiv, so that i can add new inputs. 
    var CloneTopDiv = $('.topdivdata').clone(true); 
    CloneTopDiv.find(':input').attr('value', ''); 
    CloneTopDiv.attr('class', 'txtInput') 
    CloneTopDiv = CloneTopDiv.html(); 
    var refresdiv = CloneTopDiv; 
    $('#addmoreunit').append('<tr>.' + refresdiv + '.<td class="removes1"><span class="btn btn-xs" style="cursor:Pointer;"><i class="icon-plus"></i>- Remove</span></td></tr>'); 
    unitcount++; 
    var value = $('.target').val(); 
    $('.list').val(value); 

    //Code for Remove added row 
    $('.removes1').click(function() { 
     $(this).parent().remove(); 
    }); 

    //Clearing Code 
    $('.txtInput').val('') 

}); 

参照ゾル、似ている、あなたの質問を理解していますが、これらのように行うことができませんution https://jsfiddle.net/eua98tqa/3/