Как заменить атрибут name внутри элемента в JQuery?

Question

У меня следующая проблема: У меня есть элемент Jquery Tournament.player со следующими данными:

<div class="row mb-2">
  <div class="col">
    <input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player3">
  </div>
  <div class="col p_region" style="">
    <select name="players[2][region]" class="form-control">
      <option value="" disabled="" selected="">Choose region</option>
    </select>
  </div>
  <div class="col-2">
    <button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
  </div>
</div>

Я хочу увеличить счетчик в name атрибут внутренних элементов выбора и ввода.

Это то, что я пробовал до сих пор:

var newPlayer = Tournament.player.clone().find('input, select').attr("name", function(i, name) {
  return name.replace(/(\d+)/, function($0, $1) {
    return +$1 + 1;
  });
});
newPlayer.appendTo(".players");

Он делает то, что мне нужно, но возвращает только элементы выбора и ввода, например:

<input name="players[3][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="">
<select name="players[3][region]" class="form-control" disabled="">
  <option value="" disabled="" selected="">Choose region</option>                                                                               
</select>

Что я делаюнеправильно? Я хочу получить тот же элемент, что и раньше, но получить только его часть.

Большое спасибо заранее.

Answer 1

Вы имеете в виду это:

const Tournament = {
  player: $(".mb-2")
}

var newPlayer = Tournament.player.clone();
newPlayer.find('input, select').attr("name", function(i, name) {
  return name.replace(/(\d+)/, function($0, $1) {
    return +$1 + 1;
  });
});
newPlayer.find('input').attr("value", function(i, value) {
  return value.replace(/(\d+)/, function($0, $1) {
    return +$1 + 1;
  });
});
newPlayer.appendTo(".players");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="players">
  <div class="row mb-2">
    <div class="col">
      <input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player2">
    </div>
    <div class="col p_region" style="">
      <select name="players[2][region]" class="form-control">
        <option value="" disabled="" selected="">Choose region</option>
      </select>
    </div>
    <div class="col-2">
      <button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
    </div>
  </div>
</div>