<div class="form-row">

<div class="form-group col-md-12 card">

<div
class="club-channel--effectiveDatesContainer
card-body"
></div>
</div>
<div>
<button
type="button"
class="btn btn-primary mb-3 add-effectivedate--
btn"
>
Add Effective Date
</button>
</div>
</div>

<!-- Input Model -->

<button
type="button"
class="btn btn-primary display-none"
data-toggle="modal"
id="form-elements--model_btn"
data-target="#formElementsModel"
>
Show Form Elements
</button>
<div
class="modal fade form-elements--model"
id="formElementsModel"
tabindex="-1"
role="dialog"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-primary save-changes--btn"
></button>
</div>
</div>
</div>
</div>
/**CSS**/
.badge.badge-primary.policyname-badge,
.badge.badge-primary.predefined-channel--badge,
.selected-effectiveDate--badge {
float: left;
margin-right: 0.2em;
}
.selected-effectiveDate--badge {
cursor: pointer;
}
remove .delete-policy--icon

/**JS**/
const addEffectiveDateButton =
"#clubChannelEntryForm .add-effectivedate--btn";

const closeEffectiveDateModelButton = "#formElementsModel button.close"

const clubAndChannelEntryForm = {
selectedEffectiveDates: []
};

function createChip(
chipLabel,
chipClassName,
onChipIcon
) {
const spanElement = document.createElement("span");
spanElement.className = `badge badge-primary ${chipClassName}`;
spanElement.textContent = chipLabel;
spanElement.onclick = onChipIcon;
return spanElement;
}
function onRemoveChip(chipToBeDeleted, selectedChipsSelector, postRemoval) {
return (selectedChips) => {
const deleteChipCounter = selectedChips.indexOf(chipToBeDeleted);
if (deleteChipCounter > -1) {
selectedChips.splice(deleteChipCounter, 1);
let chipElementToRemoveFromDOM;
selectedChipsSelector().childNodes.forEach((childNode, index) => {
if (deleteChipCounter === index) {
chipElementToRemoveFromDOM = childNode;
}
});
chipElementToRemoveFromDOM && chipElementToRemoveFromDOM.remove();
}
postRemoval();
};
}

function getClubAndChannelLookupSelectedEffectiveDatesContainer() {
return document.querySelector(".club-channel--effectiveDatesContainer");
}

function getFormElementsCloseModelSelector() {
return document.querySelector(closeEffectiveDateModelButton);
}

function createFormGroupWithInputElement(formGroupInputDetails) {
const {
labelFor,
labelClassName,
inputPlaceholder,
inputName,
onInputChange,
type = "text",
isRequired = true,
} = formGroupInputDetails;
// Create form group div
const formGroupDiv = document.createElement("div");
formGroupDiv.className = "form-group col-md-10";
// Create Field set
const fieldSetDiv = document.createElement("fieldset");
formGroupDiv.appendChild(fieldSetDiv);
// Create Label
const labelEle = document.createElement("label");
labelEle.for = labelFor;
labelEle.className = labelClassName;
fieldSetDiv.appendChild(labelEle);
// Create Input
const inputEle = document.createElement("input");
inputEle.type = type;
inputEle.className = "form-control";
inputEle.name = inputName;
inputEle.placeholder = inputPlaceholder;
inputEle.onchange = onInputChange;
inputEle.required = isRequired;
fieldSetDiv.appendChild(inputEle);
return formGroupDiv;
}

document.querySelector(addEffectiveDateButton).onclick = () => {
let effectiveDate;
const effectiveDatesFormGroupDiv = createFormGroupWithInputElement({
labelFor: "effectiveDates",
labelClassName: "disable-label",
inputPlaceholder: "Enter Club Name",
inputName: "effectiveDates",
type: "date",
onInputChange: (e) => {
const effectiveDateSplitByForwardSlash = e.target.value.split("-");
effectiveDate = `${effectiveDateSplitByForwardSlash[1]}/$
{effectiveDateSplitByForwardSlash[2]}/${effectiveDateSplitByForwardSlash[0]}`
},
});

const onAddEffectiveDate = () => {

closeModel();
effectiveDatesFormGroupDiv.querySelector("input").value = "";

const onPostRemovalChip = () => {

const indexOFToBeDeletedEffectiveDate =
clubAndChannelEntryForm.selectedEffectiveDates.indexOf(effectiveDate);
clubAndChannelEntryForm.selectedEffectiveDates.splice(1,
indexOFToBeDeletedEffectiveDate);
 };
clubAndChannelEntryForm.selectedEffectiveDates.push(effectiveDate);
const clubAndChannelEntrySelectedEffectiveDateChip = createChip(
effectiveDate,
"selected-effectiveDate--badge",
onRemoveChip(
effectiveDate,
getClubAndChannelLookupSelectedEffectiveDatesContainer,
onPostRemovalChip
).bind(this, clubAndChannelEntryForm.selectedEffectiveDates)
);
getClubAndChannelLookupSelectedEffectiveDatesContainer().appendChild(
clubAndChannelEntrySelectedEffectiveDateChip
);
};

openModel(
effectiveDatesFormGroupDiv,
onAddEffectiveDate,
"Select Effective Date and Add",
"Add date"
);
};

function closeModel() {
getFormElementsCloseModelSelector().click();
}

function openModel(
bodyContentDOM,
onClickHandler,
modelTitle,
saveButtonText
) {
document.querySelector(
".modal.form-elements--model .modal-body p"
).innerHTML = "";
document.querySelector(
".modal.form-elements--model .modal-footer .save-changes--btn"
).innerHTML = saveButtonText;
document.querySelector(
".modal.form-elements--model .modal-title"
).innerHTML = modelTitle;
document
.querySelector(".modal.form-elements--model .modal-body p")
.appendChild(bodyContentDOM);

document.querySelector(
".modal.form-elements--model .modal-footer .save-changes--btn"
).onclick = onClickHandler;
document.getElementById("form-elements--model_btn").click();
}