Как сделать элементы ввода «видимыми» для моего скрипта во вновь добавленных строках?

Question

У меня есть таблица, в которую загружаются данные о загрузке страницы. Затем пользователь может добавить дополнительные записи, если необходимо.

Функция добавления / удаления работает, как и ожидалось. Моя проблема в том, что мой скрипт не «видит» элементы ввода в недавно добавленных строках. Он работает, как и ожидалось, для строк, сгенерированных при загрузке страницы.

Вот как я добавляю новые строки:

  $('[name="add_charge"]').on( "click", function() { //add new rows for medications and costs     
  markup = "<tr id='tot_row'><td><input type='text' name='md_gpi'/></input></td><td>$<input 
  type='text' name='drug_price' class='price'/></input><td class='remove_charge'>-Remove</td></tr>";
  $('[name="med_charges"]').append(markup);
  });   

Вот как я перебираю таблицу, чтобы получить значения для вставки.

function submit_drugs() {
    //insert all drugs          
var eff_date = $('[name="effective_date"]').val();
             $("#tot_row").each(function () {
                var gpi =  $(this).find('[name="md_gpi"]').val(); //<< does not find this
                var cost =  $(this).find('[name="drug_price"]').val();//<< does not find this
                    if ($.isNumeric(cost)){                              
                                        $.ajax({
                                            type: 'POST',
                                            url: 'data_page.php',
                                            data: 'dPatient='+patient+"&dGpi="+gpi+"&dCost="+cost+"&dDate="+eff_date,
                                            success: function(html) {                                            
                                                  console.log(html);        
                                            }
                                        });             
                    console.log(patient+"-"+gpi +"-"+cost+"-"+eff_date); 
                    }else {
                          //do something else 
                                    }
            })  

}

Как будто мне нужно «обновить» 1017 * дом или что-то в этом роде. Я просто не могу понять это.

Answer 1

Идентификаторы не могут быть продублированы при поиске. Basi c пример ниже, показывающий проблему.

console.log('id:', $('#tot_row').length)
console.log('class', $('.tot_row').length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id='tot_row' class='tot_row'></tr>
  <tr id='tot_row' class='tot_row'></tr>
  <tr id='tot_row' class='tot_row'></tr>
</table>

Поэтому измените идентификатор на класс и измените селектор на класс.