Как использовать список данных внутри таблицы Dynami c?

Question

Я делаю динамическую c таблицу с добавлением строк, и у каждой строки есть список данных. Проблема в том, что в первой строке отображается текст, а в других - целое число из значения. И я хочу показать текст из data-text.

Проверьте мой код на: https://codepen.io/aleksandar095/pen/eYmqYVO

Возможно, я до сих пор не понимаю, как работает id. Возможно, проблема в js коде.

$(document).ready(function() {
    var counter = 2;

    $("#addrow").on("click", function() {

      counter = $('#myTable tr').length - 2;

      var newRow = $("<tr>");
      var cols = "";

      cols += '<td><input list="animals" class="form-control" id="animal'+counter+'" name="animal"><datalist id="animals"><option data-text="cat" value="1">Text 1</option><option data-text="dog" value="2">Text 2</option><option data-text="fish" value="3">Text 3</option></datalist></td>';


      cols += '<td><button type="button" class="ibtnDel btn btn-md btn-danger"><i class="fa fa-trash" style="color: #fff;"></i></button></td>';
      newRow.append(cols);
      $("table.order-list").append(newRow);

      $("#animal" + counter).bind("select", function() {
        if ($('#animals').find('option').length) {
          if ($('option[value=' + this.value + ']').length > 0) {
            $("#animal" + counter).val($('option[value=' + this.value + ']').data("text"));
          }
        }
      })

      counter++;
    });

Пожалуйста, проверьте мой полный код на codepen.

Answer 1

Простое изменение этих строк должно помочь вам вывести ваш полученный html.

var newRow = '<tr>'

var cols = '<td><input list="animals" class="form-control" id="animal'+counter+'" name="animal"><datalist id="animals"><option data-text="cat" value="1">Text 1</option><option data-text="dog" value="2">Text 2</option><option data-text="fish" value="3">Text 3</option></datalist></td>';

cols += '<td><button type="button" class="ibtnDel btn btn-md btn-danger"><i class="fa fa-trash" style="color: #fff;"></i></button></td>';
newRow += cols;

$("table.order-list").append(newRow);

Или, что еще проще:

let newRow = '<tr>'  
newRow += '<td><input list="animals" class="form-control" id="animal'+counter+'" name="animal"><datalist id="animals"><option data-text="cat" value="1">Text 1</option><option data-text="dog" value="2">Text 2</option><option data-text="fish" value="3">Text 3</option></datalist></td>';
newRow += '<td><button type="button" class="ibtnDel btn btn-md btn-danger"><i class="fa fa-trash" style="color: #fff;"></i></button></td>';

$("table.order-list").append(newRow);