How to change name attributes for auto added inputs and textareas? - html

Question

I'm trying to create a cv creater form and need to let users add more inputs (auto).
I created inputs and they work just fine, but I need to change the name attribute for each auto added block.
For example :
<input type="text" id="fname" name="fname">
<input type="text" id="fname" name="fname2">
<input type="text" id="fname" name="fname3">
I know I can use name="value[]" array, but every new block goes into a different column in the database, so I need to change attributes.
My code :
$(document).ready(function() {
var max_fields = 10;
var wrapper = $("#contant");
var add_button = $("#add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>');
} else {
alert('You Riched limit.')
}
});
$(wrapper).on("click", "#deleteInput", function(e) {
e.preventDefault();
$(this).parent('#input-social').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script>
<div class="form-group">
<div class="row">
<label class="col-3 inputFontSize" for="social">Others</label>
<div id="contant" class="col-7">
<button id="add_form_field" class="btn add_form_field">Add more <i class="fas fa-plus"></i></button>
</div>
<!-- col-9 -->
</div>
<!-- row -->
</div>
<!-- form-group -->
Thanks for all helps

Answer 1

You can use your x variable that is incremented for each added input and append it to the name attribute. We'll use a 'template string'. The adjustment is name="fname${x}" which will substitute ${x} for the value of x.
$(wrapper).append(`
<div id="input-social" class="input-container">
<input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname">
<span id="deleteInput" class="AutoInput" title="Delete">
<i class="fas fa-trash-alt"></i>
</span>
</div>`
);
$(document).ready(function() {
var max_fields = 10;
var wrapper = $("#contant");
var add_button = $("#add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(`<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>`);
} else {
alert('You Riched limit.')
}
});
$(wrapper).on("click", "#deleteInput", function(e) {
e.preventDefault();
$(this).parent('#input-social').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script>
<div class="form-group">
<div class="row">
<label class="col-3 inputFontSize" for="social">Others</label>
<div id="contant" class="col-7">
<button id="add_form_field" class="btn add_form_field">Add more <i class="fas fa-plus"></i></button>
</div>
<!-- col-9 -->
</div>
<!-- row -->
</div>
<!-- form-group -->