Develop Reference

I am using jquery repeater js library for repeat html but when i am trying to add element in nested repeater then outer repeater also called

I am using jquery form repeater js library for repeat html but when I am trying to add elements in a nested repeater and then add a button inside the repeater then the outer repeater is also called and added on element of outer repeater.
Below is my jQuery and HTML code:
<div id="m_repeater_3">
<div class="form-group form-group-last row" id="m_repeater_3">
<div data-repeater-list="color" class="col-lg-10">
<div class="form-group row align-items-center">
<div class="col-md-3">
<div class="m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">Color:</label>
</div>
</div>
</div>
</div>
<div data-repeater-item class="form-group row align-items-center">
<div class="col-md-3">
<div class="m-form__group--inline">
<div class="m-form__control">
<input type="text" class="form-control" name="color" placeholder="Color" required="required">
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-form__group--inline">
<div class="m-form__control">
<input type="file" class="form-control" name="image_4" required="required">
</div>
</div>
</div>
<div class="col-md-3">
<a href="javascript:;" data-repeater-delete="" class="btn-sm btn btn-danger btn-bold">
<i class="la la-trash-o"></i>
</a>
</div>
<div id="m_repeater_2">
<div class="form-group form-group-last row" id="m_repeater_2">
<div data-repeater-list="stock" class="col-lg-10">
<div class="form-group row align-items-center">
<div class="col-md-3">
<div class="m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">Size:</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">Stock:</label>
</div>
</div>
</div>
</div>
<div data-repeater-item class="form-group row align-items-center">
<div class="col-md-3">
<div class="m-form__group--inline">
<div class="m-form__control">
<input type="text" class="form-control" name="Size" placeholder="Color" required="required">
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-form__group--inline">
<div class="m-form__control">
<input type="text" class="form-control" name="stock" placeholder="Color" required="required">
</div>
</div>
</div>
<div class="col-md-3">
<a href="javascript:;" data-repeater-delete="" class="btn-sm btn btn-danger btn-bold">
<i class="la la-trash-o"></i>
</a>
</div>
</div>
</div>
</div>
<div class="form-group form-group-last row">
<label class="col-lg-2 col-form-label"></label>
<div class="col-lg-4">
<a href="javascript:;" data-repeater-create="" class="btn btn-bold btn-sm btn-brand">
<i class="la la-plus"></i> Add
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group form-group-last row">
<label class="col-lg-2 col-form-label"></label>
<div class="col-lg-4">
<a href="javascript:;" data-repeater-create="" class="btn btn-bold btn-sm btn-brand">
<i class="la la-plus"></i> Add
</a>
</div>
</div>
</div>
Here is my jquery function which i am using for repeater
var FormRepeater = function() {
var demo2 = function() {
$('#m_repeater_3').repeater({
initEmpty: false,
defaultValues: {
'code': ''
},
show: function() {
$(this).slideDown("slow", function() {});
},
hide: function(deleteElement) {
$(this).slideUp(deleteElement);
}
});
}
var demo3 = function() {
$('#m_repeater_2').repeater({
initEmpty: false,
defaultValues: {
'code': ''
},
show: function() {
$(this).slideDown("slow", function() {});
},
hide: function(deleteElement) {
$(this).slideUp(deleteElement);
}
});
}
return {
// public functions
init: function() {
demo2();
demo3();
}
};
}();

var FormRepeater = function() {
var demo2 = function() {
$('#m_repeater_3').repeater({
initEmpty: false,
defaultValues: {
'code': ''
},
repeaters: [{
// (Required)`enter code here`
// Specify the jQuery selector for this nested repeater
selector: '.inner-repeater'
}],
show: function() {
$(this).slideDown("slow", function() {});
},
hide: function(deleteElement) {
$(this).slideUp(deleteElement);
}
});
}
return {
// public functions
init: function() {
demo2();
}
};
}();

How to prevent adding double input with onclick button

Hi guys so when I try to add a question and answers this code works. But if I have made 2 questions and want to add a answer it will put an extra "answer" field in BOTH of the question. But ofcourse I only want to add an answer field to the "question" button i clicked on
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer()">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer() {
answer++;
var allanswers = document.getElementById('all_answers')
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>
If something is unclear I will try to explain it.
Please dont be to harsh I am pretty new to javascript...

All you needed to do was specify in your questions container an ID for where to put your answers in your add answer function i just used the question increment as an id and added that to the <div id="all_answers_${id}"> id and passed the id in the click function onclick="add_answer(${id})".
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
var id = question;
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers_${id}">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer(${id})">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer(id) {
answer++;
var allanswers = document.getElementById('all_answers_'+id)
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>

Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions

Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored
I have tried .on() .live() .submit() functions but get the same result. My php file consists of a print_r($_POST); and nothing else this is put into the console.
https://pastebin.com/CuAPSzKe - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.
This is the code to make the call:
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
console.log(data);
}
});
});
My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.

It is having a major issue due to the way your html is arbitrarily structured and you are missing a end div tag for your item information container. Fix these issues and it will run. You also may want to go ahead and start your first item information with a start of 0 and set your counter to 1 so it is easier to aparse on the backend once you recieve the info.
Move your form tag under your first container:
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
End tag
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</form>
</div>
Full example of cleaned up code running:
function test() {
var billName = document.getElementById('bill_name');
var shipName = document.getElementById('ship_name');
var billLine1 = document.getElementById('bill_line_1');
var shipLine1 = document.getElementById('ship_line_1');
var billLine2 = document.getElementById('bill_line_2');
var shipLine2 = document.getElementById('ship_line_2');
var billLine3 = document.getElementById('bill_line_3');
var shipLine3 = document.getElementById('ship_line_3');
var billLine4 = document.getElementById('bill_line_4');
var shipLine4 = document.getElementById('ship_line_4');
var billCounty = document.getElementById('bill_county');
var shipCounty = document.getElementById('ship_county');
var billPostcode = document.getElementById('bill_post');
var shipPostcode = document.getElementById('ship_post');
var billTele = document.getElementById('bill_telephone');
var shipTele = document.getElementById('ship_telephone');
var billEmail = document.getElementById('bill_email');
var shipEmail = document.getElementById('ship_email');
shipName.value = billName.value;
shipLine1.value = billLine1.value;
shipLine2.value = billLine2.value;
shipLine3.value = billLine3.value;
shipLine4.value = billLine4.value;
shipCounty.value = billCounty.value;
shipPostcode.value = billPostcode.value;
shipTele.value = billTele.value;
shipEmail.value = billEmail.value;
}
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
var test = form.serialize();
alert(test);
});
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td> <input type="text" class="form-control" name="sku' + counter + '" /></td> ';
cols += '<td> <input type="text" class="form-control" name="quantity' + counter + '" /></td> ';
cols += ' <td> <input type="text" class="form-control" name="price' + counter + '" /></td>';
cols += ' <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="bill_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Name</div>
</div>
<input id="bill_name" name="bill_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 1</div>
</div>
<input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 2</div>
</div>
<input id="bill_line_2" name="bill_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 3</div>
</div>
<input id="bill_line_3" name="bill_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 4</div>
</div>
<input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="bill_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing County</div>
</div>
<input id="bill_county" name="bill_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Postcode</div>
</div>
<input id="bill_post" name="bill_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Telephone Number</div>
</div>
<input id="bill_telephone" name="bill_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Email Address</div>
</div>
<input id="bill_email" name="bill_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="ship_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Name</div>
</div>
<input id="ship_name" name="ship_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 1</div>
</div>
<input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 2</div>
</div>
<input id="ship_line_2" name="ship_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 3</div>
</div>
<input id="ship_line_3" name="ship_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 4</div>
</div>
<input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="ship_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping County</div>
</div>
<input id="ship_county" name="ship_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Postcode</div>
</div>
<input id="ship_post" name="ship_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Telephone Number</div>
</div>
<input id="ship_telephone" name="ship_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Email Address</div>
</div>
<input id="ship_email" name="ship_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
<button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button>
</div>
</div>
<br>
<div class="container">
<h2>Extra Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group row">
<label for="ship_method" class="col-5 col-form-label">Shipping Method</label>
<div class="col-7">
<div class="input-group">
<input id="ship_method" name="ship_method" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-anchor"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label>
<div class="col-7">
<div class="input-group">
<input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
</div>
<span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span>
</div>
</div>
<div class="form-group row">
<label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label>
<div class="col-7">
<div class="input-group">
<input id="mage_order_number" name="mage_order_number" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<h2>Item Information</h2>
<div class="row">
<div class="col-12">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>SKU</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="sku" class="form-control" />
</td>
<td>
<input type="number" name="quantity" class="form-control" />
</td>
<td>
<input type="number" name="price" class="form-control" />
</td>
<td>
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

how to change bootstrap card-header value with java script?

I have a ejs(html) file, and There is a div class called "card".
What I want to do is that, if I click the button("Click me") then,
card-header(header1) has to be changed(before --> after) with colored back-ground.
However when I clicked the button, only the back-ground color was changed (excluding the header). need your help.
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.setAttribute("value", "After");
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6

Update the innerHTML
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.innerHTML = "After";
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6

JavaScript Remove upper Element

I want to remove the whole <div class="form-group"> when I click on the <span type="button">.
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-5">
<div class="input-group">
<input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
<div class="input-group-btn">
<span onclick="removeRow(this)" class="btn btn-default" type="button">
Verwijder
</span>
</div>
</div>
</div>
</div>
It must be look like this:
<script>
function removeRow(element){
element.parentNode.remove();
}
</script>

How about something like this
<div class="form-group" id="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-5">
<div class="input-group">
<input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
<div class="input-group-btn">
<span class="btn btn-default" id="clickme" type="button">
Verwijder
</span>
</div>
</div>
</div>
</div>
Then the js
var cm = document.getElementById('clickme');
cm.addEventListener('click',function(){
console.log('clicked');
var fg = document.getElementById('form-group');
fg.parentElement.removeChild(fg);
});
see fiddle
http://jsfiddle.net/X8Cwq/

Just traverse the tree up to that node and remove it.
function removeRow(element){
element.parentNode.parentNode.parentNode.parentNode.remove();
}
DEMO