Добавить атрибут в недавно добавленное поле ввода в JavaScript

Question

У меня есть следующий код, который скрыт.

<div id="orderFields" style="display: none;">
  <table class="table">
    <tbody id="more-tr">
      <tr>
        <th style="font-weight: bold">Offer</th>
        <td class="col-lg-6 col-md-6 col-sm-12">
          <input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
        </td>
        <th style="font-weight: bold">Image</th>
        <td class="col-lg-4 col-md-4 col-sm-12">
          <img src="" style="max-width:40%;max-height:20%" />
          <input type="file" name="image[]" style="background: transparent;border: transparent">
        </td>
        <td class="col-lg-2 col-md-2 col-sm-12">
          <a href="javascript:void(1);" style="width: 10%;">
            <span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

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

<div class="col-md-12">
  <a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
    <i class="fa fa-plus"></i> <span>Add offer(s)</span>
  </a>
</div>

И javascript следующий:

$("#addMore").on("click", function() {
  $(".multipleDiv").after($('#orderFields #more-tr').html());
});

Кнопка и tr работают отлично, но при отправке формы я получаю данные из скрытого div. Итак, я удалил атрибут из div, который скрыт. Теперь я хочу добавить атрибут имени в поле ввода, которое просто добавляется после нажатия кнопки. Но, опять же, я не хочу добавлять атрибут в поле ввода тега ввода, который скрыт.

Как мне этого добиться? Кроме того, почему я не получаю данные из <input type="file" name="image">, который находится внутри тега формы

Answer 1

Вы можете использовать clone(), а затем find(), чтобы получить ввод с идентификатором offer. Затем используйте attr() для установки атрибута.

$("#addMore").on("click", function() {
  let clone = $('#orderFields #more-tr').clone();
  let offer = clone.find('input[type="text"]');
  offer.attr('name', 'newOffer'); // replace with your value
  offer.attr('id', new Date().getTime()); // ID needs to be unique
  $(".multipleDiv").append(clone);
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="orderFields" style="display: none;">
  <table class="table">
    <tbody id="more-tr">
      <tr>
        <th style="font-weight: bold">Offer</th>
        <td class="col-lg-6 col-md-6 col-sm-12">
          <input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
        </td>
        <th style="font-weight: bold">Image</th>
        <td class="col-lg-4 col-md-4 col-sm-12">
          <img src="" style="max-width:40%;max-height:20%" />
          <input type="file" name="image[]" style="background: transparent;border: transparent">
        </td>
        <td class="col-lg-2 col-md-2 col-sm-12">
          <a href="javascript:void(1);" style="width: 10%;">
            <span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<table class="multipleDiv"></table>

<div class="col-md-12">
  <a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
    <i class="fa fa-plus"></i> <span>Add offer(s)</span>
  </a>
</div>