We Keep Coding

how can i store data in dynamic field using php and mysqli

I am creating a dynamic resume form in which I have created dynamic add remove field with the help of java script but I am not getting any idea to store the input values of this dynamic form in database I am giving some code below -
dynamic add Remove script code resume.js
$(document).ready(function(){
var maxField = 5; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML =
'<div class="field_wrapper"><div class="mb-3"><input type="text" name="skills[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
// *************** Hobby******************
$(document).ready( function(){
var maxhobby = 4;
var addHobby = $('.add_hobby');
var hobby_wrapper = $('.hobby_wrapper');
var hobbyHTML = '<div class="hobby_wrapper"><div class="mt-sm-0"><input type="text" name="myhobby[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addHobby).click( function(){
if (x < maxhobby) {
x++
$(hobby_wrapper).append(hobbyHTML);
}
});
// Once Remove Button Click
$(hobby_wrapper).on('click', '.remove_hobby', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Job Objective******************
$(document).ready( function(){
var maxjob = 4;
var addjob = $('.add_job');
var job_wrapper = $('.job_wrapper');
var jobHTML = '<div class="job_wrapper"><div class="mt-sm-0"><input type="text" name="myjob[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addjob).click( function(){
if (x < maxjob) {
x++
$(job_wrapper).append(jobHTML);
}
});
// Once Remove Button Click
$(job_wrapper).on('click', '.remove_job', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Education ******************
$(document).ready( function(){
var maxedu = 10;
var addEdu = $('.add_edu');
var edu_wrapper = $('.edu_wrapper');
var eduHTML = '<div class="edu_wrapper"><hr><div class="d-flex justify-content-between mb-lg-3"><div class="col-md-6"><label class="form-label">School/University</label><input type="text" name="school_name[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">Degree/Course</label><input type="text" name="degree[]" class="form-control" required></div></div><div class="col-md-12"><label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label><input type="text" name="mark[]" value="" class="form-control"/></div><div class="d-flex justify-content-between"><div class="col-md-6"><label class="form-label">Start Date</label><input type="text" name="start_date[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">End Date</label><input type="text" name="end_date[]" class="form-control" required></div></div><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addEdu).click( function(){
if (x < maxedu) {
x++
$(edu_wrapper).append(eduHTML);
}
});
// Once Remove Button Click
$(edu_wrapper).on('click', '.remove_edu', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
and this is my form code for resume form.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="create-resumecv" method="post" enctype="multipart/form-data" name="add_name" id="add_name">
<!-- Start Education -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning">Education & Qualification</h4>
<div class="edu_wrapper">
<div class="d-flex justify-content-between mb-lg-3">
<div class="col-md-6">
<label class="form-label">School/University</label>
<input type="text" name="schoolname[]" class="form-control" >
</div>
<div class="col-md-6 ms-2">
<label class="form-label">Degree/Course</label>
<input type="text" name="degree[]" class="form-control" >
</div>
</div>
<div class="col-md-12">
<label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label>
<input type="text" name="mark[]" value="" class="form-control"/>
</div>
<div class="d-flex justify-content-between mt-3">
<div class="col-md-6">
<label class="form-label">Start Date</label>
<input type="date" name="startdate[]" class="form-control" >
</div>
<div class="col-md-6">
<label class="form-label">End Date</label>
<input type="date" name="enddate[]" class="form-control" >
</div>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_edu" title="Add More Eduction"><img src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
<!-- End Education -->
<!-- About Me -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">About Me</h4>
<div class="form-floating">
<textarea class="form-control" id="editor" name="aboutme"></textarea>
</div>
</div>
<!-- End -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Skills</h4>
<p class="text-muted">Add More Skill Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="field_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Skill</label>
<input type="text" name="skills[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_button" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Job-Objective</h4>
<p class="text-muted">Add More Job Objective Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="job_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Job Objective</label>
<input type="text" name="myjob[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_job" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- My Hobbies -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Hobbies</h4>
<div class="mb-3">
<div class="hobby_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Hobby</label>
<input type="text" name="myhobby[]" value="" class="form-control"/>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_hobby" title="Add hobby"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!-- end My Hobbies -->
<!--Start Experience -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Experience</h4>
<div class="expe_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="experience_title" class="form-control">
</div>
<div class="mb-3">
<div class="form-floating">
<label for="exampleInputEmail1" class="form-label">Description</label>
<textarea class="form-control" name="experience_des" id="editor2"></textarea>
</div>
</div>
</div>
</div>
<!-- end Experience -->
<div class="text-center">
<button type="submit" title="Submit your form for generate Resume" class="btn btn-success mb-5" name="create-resume" id="submit"> <img src="<?php echo BASE_URL . 'reg-users/images/resume.png' ?>" style="width: 20px; height: 20px;"> Create Resume</button>
</div>
</form>
there are no any issue to add or remove dynamic input field its work correctly, but don't have an idea to store dynamic add field form values in mysqli database.
please tell me how can i store dynamic input field values in database using PHP.

At last I found the solution, so I am posting the answer.
See, when we want to store the input values of the form in the form of an array in the database, then we simply define a string to array, it is a simple thing.
I have used the implode and explode function of php in this solution, then I got the perfect solution. You can also use this function if you want.
implode(",", $array); // defined or predefined.
The implode() function returns a string from the elements of an array.
explode(",", $array); // you want break array to string.
The explode() function breaks a string into an array.

Increase name attribute by 1 after adding the new section jQuery

On click event, I'm cloning the section which is working fine. I'm having while duplicating the section i want to change the name attribute like increase by 1 every time when add the new section.
This is my code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first" placeholder="“Firstname”" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date" type="text">
</div>
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="javascript:;" id="addChild" name="addchild">Add Child</a>
</div>
</div>
.hide { display: none }
.field { margin-left: 20px }
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true,true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template)
.attr("name", "first[" + i + "]")
$(".removeButton").toggle($(".removeButton").length > 2);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
$(".removeButton").toggle($(".removeButton").length > 2);
});
$(".removeButton").toggle($(".removeButton").length > 2);
});
.attr("name", "first[" + i + "]")
I'm using this line of code to increase name attribute like name="first", name="first1" and so on when add the new section. But it's not working.
Can anyone help me with this.
Thanks in advance.

i is not defined. Make a count variable that holds the number.
$(document).ready(function() {
var count = 0;
$('#taskForm')
//Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template)
.attr("name", "first" + count++)
$(".removeButton").toggle($(".removeButton").length > 2);
})
});

jquery data attributes search with condition

I am using jquery's data attributes to search values from dropdown. Here below is the thing what i am doing here..
$(document).ready(function() {
// Default selected as blank value
$('#search_by_brand').prop('selectedIndex', "");
// Our work page - Search by Brand
$('#search_by_brand').change(function() {
$('#search_by_channel').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var brand_value = $(this).val();
if(brand_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-brand='"+ brand_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_channel').prop('selectedIndex', "");
// Our work page - Search by Product Channel
$('#search_by_channel').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var channel_value = $(this).val();
if(channel_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-channel='"+ channel_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_type').prop('selectedIndex', "");
// Our work page - Search by Product Type
$('#search_by_type').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_channel').prop('selectedIndex', "");
var type_value = $(this).val();
if(type_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-type='"+ type_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<label class="control-label">Brand</label>
<select class="form-control" id="search_by_brand" name="search_by_brand">
<option value="">Select Product Brand</option>
<option value="GLAM">GLAM</option>
<option value="PEDIGREE">PEDIGREE</option>
<option value="NESTLE">NESTLE</option>
<option value="HAVAIANAS">HAVAIANAS</option>
<option value="ROYAL CANIN">ROYAL CANIN</option>
<option value="EUKANUBA">EUKANUBA</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Channel</label>
<select class="form-control" id="search_by_channel" name="search_by_channel">
<option value="">Select Product Channel</option>
<option value="Pharmacy">Pharmacy</option>
<option value="Pet">Pet</option>
<option value="Department Store">Department Store</option>
<option value="Vet">Vet</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Type</label>
<select class="form-control" id="search_by_type" name="search_by_type">
<option value="">Select Product Type</option>
<option>Advertisement</option>
<option>Campaign</option>
</select>
</div>
</form>
<div class="filtr-container">
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Vet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/10">
<img src="http://static.tumblr.com/yka2yx5/YHAm28h2j/glam_fb.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Daily Care</span><br>
<span class="roboto-light">Vet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="ROYAL CANIN" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/9">
<img src="http://www.royalcanin.com.au/extension/site_subsidiary_v3/design/subsidiary_v3/images/article/no-img-article.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">ROYAL CANIN</span><br>
<span class="f-s-23 lobstar">Feline Gondola End</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="HAVAIANAS" data-channel="Department Store" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/8">
<img src="http://image.brazilianbikinishop.com/images/products/flipflop-havaianas-brasil-logo-green-0.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">HAVAIANAS</span><br>
<span class="f-s-23 lobstar">Pop Up</span><br>
<span class="roboto-light">Department Store</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="NESTLE" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/7">
<img src="http://www.indiantelevision.com/sites/drupal7.indiantelevision.co.in/files/images/mam-images/2016/04/18/mam%20financials.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">NESTLE</span><br>
<span class="f-s-23 lobstar">Good Life</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="PEDIGREE" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/6">
<img src="https://www.petsworld.in/media/brands/6/pedigree2.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">PEDIGREE</span><br>
<span class="f-s-23 lobstar">Cleaner gets you closer</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/5">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/GLAM_logo.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Beauty Bar</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
</div>
As you can see in my demo that i am searching Products from Brand,Channel and Type. But i want to enable an ability to Advance Search the same thing with multiple dropdown.
For now it is searching only with one dropdown, i want an ability to search with multiple dropdown say for example, if i select Product Brand "GLAM" and Product Channel "Pharmacy" then only those records should come using "AND" condition or jquery or something like that ..
Same should apply to Product Type as well .. What should i do ?
Thanks

You can assign a class to all select elements and bind change using class selector as code is same for all select elements.
You can create filters based on values of dropdown and dynamically add filters if value of dropdown is selected.
$(document).ready(function () {
$('.selectFilter').change(function () {
var brand_value = $("#search_by_brand").val();
var channel = $('#search_by_channel').val();
var type = $("#search_by_type").val();
var channelFilter = "";
var typeFilter = "";
var brand_valueFiltr = "";
if (brand_value != '')
brand_valueFiltr = "[data-brand='" + brand_value + "']";
if (channel != '')
channelFilter = "[data-channel='" + channel + "']";
if (type != '')
typeFilter = "[data-type='" + type + "']";
$(".filtr-container div").hide();
$(".filtr-container div" + brand_valueFiltr + channelFilter + typeFilter).show().children().show();
$(".filtr-container").find(".mask").show();
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if (visible_divs == 0) {
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else {
$(".no_records").remove();
}
});
});
Here is jsfiddle

How to remove appended div on jquery

Hello I want to remove the cloned html when I click this, what is the best way? how to detect that it's what I've clicked on X
and this is the HTML
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Fields</h4>
</div>
<div class="panel-body">
<div class="field">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<a id="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
</div>
<div class="panel-body">
<select class="form-control" name="custom_form[type]" required>
<option value="">Type</option>
<option>text</option>
<option>textarea</option>
<option>radio</option>
<option>checkbox</option>
</select>
<input class="form-control" type="text" name="customform[label]" placeholder="Label" />
</div>
</div>
</div>
</div>
+ Add attribute
</div>
</div>
</div>
and this is what I've used to clone the fields when I click the button + Add Attribute
<div class="clone-field hide">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<a id="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
</div>
<div class="panel-body">
<select class="form-control" name="custom_form[type]" required>
<option value="">Type</option>
<option>text</option>
<option>textarea</option>
<option>radio</option>
<option>checkbox</option>
</select>
<input class="form-control" type="text" name="customform[question]" placeholder="Question" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
alert("ok");
var append_att = $(".clone-field").html();
$(".field").append(append_att);
});
</script>
EDIT1
the close is already done, so I added one more since it's still same concept,
How to add <input type="text" name="customform[option]" placeholder="Ex. Male,Female" /> when I select Type = radio,select,checkbox and remove if it's not, then put it under on the Label input?
currently I have
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
var append_att = $(".clone-field").html();
$(".fields").append(append_att);
}).on('click', '.remove', function() {
$(this).closest('.field').remove();
}).on('change', '.field-type', function(){
var input_option = '<input class="form-control" type="text" name="customform[option]" placeholder="Ex. Male,Female" /> ';
var valueSelected = this.value;
if(valueSelected == 'radio' || valueSelected == 'select')
//append
else
//remove
});
EDIT2
I've added this hidden input text
how to find closest into removeClass('hide')/addClass('hide') of my base on Type = radio,select
EDIT3 - MY TOTAL ANSWER
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
var append_att = $(".clone-field").html();
$(".fields").append(append_att);
}).on('click', '.remove', function() {
$(this).closest('.field').remove();
}).on('change', '.field-type', function(){
var inputType = this.value;
var panel = $(this).closest('.panel-body');
var inputs = panel.find('input');
inputs.last().val("");
if(inputType=='radio' || inputType=='select') {
inputs.last().removeClass('hide');
} else {
inputs.last().addClass('hide');
}
});

Your are using duplicate id=close. Use class=close instead like following.
<a class="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
And your js for removing item should be like this.
$('.container').on('click', '.close', function(){
$(this).closest('.col-md-6').remove();
});
Update
$('.container').on('click', 'select.form-control', function () {
var input_type = this.value;
var panel = $(this).closest('.panel-body');
var inputs = panel.find('input');
if (input_type == 'radio' || input_type == 'select') {
if (inputs.length > 1) {
inputs.last().removeClass('hide');
}
else {
var input_option = '<input class="form-control" type="text" name="customform[option]" placeholder="Ex. Male,Female" /> ';
panel.append(input_option);
}
} else {
if (inputs.length > 1)
inputs.last().addClass('hide');
}
});

Two simple steps:
change #close to class .close. You should not duplicate ids.
add some class to col-md-6 container to be able to select it later. You could use col-md-6 too but you don't want to tie JS code to layout specific classes
HTML becomes:
<div class="clone-field hide">
<div class="block col-md-6">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<a class="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
</div>
<div class="panel-body">
<select class="form-control" name="custom_form[type]" required>
<option value="">Type</option>
<option>text</option>
<option>textarea</option>
<option>radio</option>
<option>checkbox</option>
</select>
<input class="form-control" type="text" name="customform[question]" placeholder="Question" />
</div>
</div>
</div>
</div>
Then you also need to add once more click handler similar to what you already have:
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
alert("ok");
var append_att = $(".clone-field").html();
$(".field").append(append_att);
})
.on('click', 'close', function() {
$(this).closest('.block').remove();
});

You should use jQuery.closest() https://api.jquery.com/closest/ to travel from the button you clicked back to the parent container that holds all the panel
$('#close').on('click', function(){
$(this).closest('.clone-field').remove();
});
.clone-field is the top most DIV of the panel to delete
Edit:
Also, Difference between id and class in CSS and when to use it

How to get the index of a parent of the item from where the click event was triggered

So I have the code in this pen : http://codepen.io/Cristian_N/pen/PPbBde?editors=101
To explain what I did there, I added a button that would append a fieldset when it was clicked.
Whithin that fieldset ( both the original and the appended one ) there is also a button that appends an input to a div that is whithin the fieldset.
What I want to do is this: when I add multiple input elements, those input elements should get the index number of the parent fieldset, while incrementing the operations number. I managed the incrementing of the operations number part. Is there any way I can make it get the fieldset index number with javascript/jquery?
My html:
<div class="row">
<div class="large-10 columns large-centered">
<form id="client-details" class="" method="post" action="action-write.php">
<div id="client-details-form">
<label>First Name
<input type="text" name="clients[0][firstName]">
</label>
<label>Last Name
<input type="text" name="clients[0][lastName]">
</label>
<label>Date
<input type="text" name="clients[0][created]" value="20-sept-2015">
</label>
<fieldset class="eq-grup-0">
<legend>Equipment</legend>
<label>
<input type="text" name="clients[0][equipment][0][name]">
</label>
<div class="op-field">
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">Operatiune</span>
</div>
<div class="small-6 columns">
<input type="text" name="clients[0][equipment][0][operations][0][name]">
</div>
<div class="small-3 columns">
<span class=" postfix add-op" id="add-op">Adauga Operatiune</span>
</div>
</div>
</div>
<span class="button small" id="add-eq-group">Add Eq</span>
</fieldset>
</div>
<input type="submit" class="button" value="Submit">
</form>
</div>
</div>
My jQuery:
var i = $('#client-details fieldset').size();
var k = $('.op-to-be-removed', $(this).parent('fieldset')).index();
$("#client-details-form").on("click", "#add-eq-group", function(){
$("#client-details-form").append('<fieldset class="eq-to-be-removed eq-grup-' + i + '"><legend>Equipment</legend><label><input type="text"name="clients[<?php echo $c; ?>][equipment][' + i + '][name]"></label><div class="op-field"><div class="row collapse"><div class="small-2 columns"><span class="prefix">Operatiune</span></div><div class="small-6 columns"><input type="text" name="clients[<?php echo $c; ?>][equipment][' + i + '][operations][0][name]"></div><div class="small-3 columns"><span class=" postfix add-op" id="add-op">Adauga Operatiune</span></div></div></div><span class="button small remove_eq">Remove Eq</span></fieldset>');
i++;
});
$("#client-details-form").on("click", ".remove_eq", function(){
if( i > 0 ) {
$(this).closest(".eq-to-be-removed").remove();
i--;
}
});
$("#client-details-form").on("click", "#add-op", function() {
var j = $('.op-to-be-removed', $(this).closest('.op-field')).size() + 1;
$(this).closest(".op-field").append('<div class="row collapse op-to-be-removed"><div class="small-2 columns"><span class="prefix">Operatiune</span></div><div class="small-6 columns"><input type="text" name="clients[<?php echo $c; ?>][equipment][' + k + '][operations][' + j + '][name]"></div><div class="small-3 columns"><span class="postfix remove_op">Sterge</span></div></div>');
j++;
});
$("#client-details-form").on("click", ".remove_op", function(){
if( j > 1 ) {
$(this).closest(".op-to-be-removed").remove();
j--;
}
});

I managed to figure it out in the meantime and updated the original pen with the solution here. I used this var k = $($(this).closest('fieldset')).index(); for k