Перебор data-* атрибута.

[HotReboot]

Здравствуйте. Есть форма для заполнения данных кредитной карты.

<form id="payment_form" autocomplete="off">
    <input type="text" data-cp="cardNumber">
    <input type="text" data-cp="expDateMonth">
    <input type="text" data-cp="expDateYear">
    <input type="text" data-cp="cvv">
    <input type="text" data-cp="name">
    <button type="submit">Оплатить</button>
</form>

Как мне перебрать одинаковый атрибут data-cp для formData.append с именем атрибута и value??
Спасибо.
P.S. Прописать "name" нельзя так как несмотря на то, что я в рамках одного сервера передаю ajax'ом в их предварительном скрипте подготавливает криптограмму платежных данных и на "name" ругается. Из их документации:

На полях не должно быть атрибута "name" — это предотвращает попадание карточных данных на сервер при отправке формы.

Понимаю, что можно прописать id или сlass, но как-то громоздко выглядит 5 штук getElementById.

[рони]

HotReboot,

document.querySelectorAll('[data-cp]').forEach(({value, dataset : {cp}}) => formData.append(cp, value));

[voraa]

Я не понял, что такое

перебрать одинаковый атрибут

Но наверно речь идет об этом

const fd = new FormData(f);
document.fetElementById('payment_form').querySelector('input')
   .forEach(inp => fd.append(inp.dataset.cp, inp.value);