I have a select list that gets items from the datababase where we can add other items to it from an other list or delete items in it,
<div class="form-group col-md-3">
<label for="IX">Selected Issuing Banks</label>
<select id="IX" name="IX" multiple="multiple" style="width: 250px; height: 70px; margin: 0px 2px 0px 3px;" data-bind="options: IX, optionsText: function(item) { return item.Name +' (' + item.BICCode + ')' }, optionsValue: 'Id',value: IdIX"></select>
</div>
And just after the selectlist, I have a div with multiple textfields to insert into the database, I want to show multiple numbers of this same div synchronously according to the items in the select, if the list essentially has 2 times we'll have this div shown twice, if we add another item to the list it will become 3 times and I am having trouble with making this
The trick will be in naming elements but jquery .each() should get you started:
$("#IX option").each(function () {
$("body").append($("#fieldsDiv").html());
});
I'd recommend using a content template and dynamically build the new divs based on it:
<div class="divContainer">
</div>
<template id="fieldsDivTemplate">
<div class="fields">
<!-- your fields go here use {{tags}} as placeholders for id values -->
</div>
</template>
<script>
$(function () {
let t = $("#fieldsDivTemplate").html();
t = t.replace(/{{tags}}/g, "value from select list item goes here");
body.append(t);
});
</script>