자바스트립트와 php 소스 혼용 시 변수관련 채택완료

여분필드를 활용해 추가 입력폼 작업을 하고 있습니다.

입력폼이 많아 각 항목별로 여분필드에 배열로 넣고있는데

특정 항목은 가변적이라 스크립트를 이용해 폼을 추가, 삭제 하는 것을 구현했습니다.

아래 스크립트는 대충 table의 상단 항목중 + 버튼을 누르면 아래로 

<td><input>입력폼이 늘어나 원하는 만큼 데이터를 넣을 수 있는 소스입니다.

문제는 수정 시 기존 항목을 불러와 수정을 해야 하는데

그럴려면 입력당시의 input 만큼 i 값을 처리 해야 하는데

+ 버튼으로 스크립트 소스가 늘어날때 i를 1씩 늘어나게 하려면 어떻게 해야 할까요?

수정시에 필요한 부분이라 input의 value안의 변수만 증가하면 됩니다. 

실제<?php echo wr_1[$i];?> 요부분에 변수i 대신 0부터1씩 늘려서 그냥 넣으면 해당 값을 불러오긴 합니다. 

<table id="item_table">

<th>구분</th>

<th>내용</th>

<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>

</table>

<script>

$(document).ready(function(){

   $(document).on('click', '.add', function(){

      var html = '';

      html += '<tr align=center>';

      html += "<td >이름</td>";

      html += "<td ><input type='text' name='wr_1[]'  value='<?php echo wr_1[$i];?>' id='wr_1'  class='form-control input-sm' size='50' maxlength='255'></td>";

      html += '<td ><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';

      html += '</tr>';

      $('#item_table').append(html);

   });

   $(document).on('click', '.remove', function(){

      $(this).closest('tr').remove();

   });

});

</script>