Nested forms using laravel and jquery - php

Question

This is a form to create a new scorecard.. When I click on add new objective button. A new objective is added. My problem comes when I want to add new kpi in the second or other objectives apart from the firt one, the kpi is added in the first objective and also it adds the whole scorecard form instead of only one objective per click.This image shows how the kpi is added.
Here is my scorecard code
<form id="form" action='/scorecard'>
<div class="class" id="objectives_place">
<div class="row col-md-10 col-md-offset-1" >
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input id="scoreCardName" name="scoreCardName" value="{{ $scorecard['name'] }}" style="height: 40px;" type="text" class="form-control" placeholder="score card name" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="name">Employee</label>
<select name="employeeid" id="employeeid" class="form-control" style="height: 40px;">
<option value="">choose employee</option>
#foreach($employees as $employee)
<option value="{{$employee->id}}"
#if(($employee->id) == (isset($scorecard_info->employee_id)?$scorecard_info->employee_id:''))
selected
#endif>{{$employee->first_name}} {{$employee->middle_name}} {{$employee->lastname}}
</option>
#endforeach
</select>
<br>
{{-- <small>Select Employee for the Objective Button to appear</small> --}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="description">Description</label>
<textarea name="scorecard_description" class="form-control" id="description" style="resize: none;height: 40px;" placeholder="score card description">{{ $scorecard['description'] }}</textarea>
</div>
</div>
</div>
<div id="objectivesData" class="row ">
#include('organization::objectiveAdd')
</div>
</div>
</div>
<div class="row col-md-10 col-md-offset-1">
<div class="row col-md-12">
<button id="newobjectivebtn" type="button" style="width:200px; float: left; padding: 5px;background-color:#a3d84e; border: 1px solid #fff; color: #fff; display: none;">Add new Objective</button>
</div>
<div class="row col-md-12 text-center" ><br>
<div id="listobjective" style="max-height:400px;">
</div> <br>
<button type="button" id="savescorecard" style="width: 365px; padding: 5px;
background-color:#a3d84e; border: 1px solid #fff; color: #fff; display: none; float:right;">Save Scorecard</button>
</div>
</form>
This is jquery for adding new objective
$('#newobjectivebtn').click(function(){
var objectiveIndex = $(this).data("objective-index");
let form = $('form');
$.ajax({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
},
type:'POST',
url:'{{route('add_scorecard_objectives')}}',
data:form.serialize(),
success:function(response){
var div = $('#objectivesData')
div.append(response);
},
error:function(response){
toastr.error('System Error , Contact Administrator!');
}
})
});
This is the jquery code for adding new kpi
$('#objectivesData').on('click','.newkpibtnn',function(){
let form = $('form');
var objectiveIndex = $(this).data("objective-index");
console.log(objectiveIndex);
$.ajax({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
},
type: "POST",
url: "{{ route('add_objectives_kpis') }}",
data:form.serialize() + "&objectiveIndex=" + objectiveIndex,
success: function(response) {
var div = $('#kpis_row_data')
div.append(response);
},
error: function(error) {
console.log(error);
}
});
});
This is the objectiveAdd.blade.php file
#foreach ($scorecard['objectives'] as $objective)
<div class="row">
<div class="row col-md-12 " id="objectives_page">
<div class="container-fluid spark-screen">
<div class="row">
<div class="box box-green">
<div class="box-header with-border">
<h2 style="font-size: 22px;margin-bottom: -5px;margin-top: 0px; text-align:center;">Scorecard Objective</h2>
</div>
<div class="box-body" >
<div class="row col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4">
<div class="form-group col-ms-12">
<label for="Objective">Name</label>
<input type="text" name="objectives[name]" value="{{ isset($objective['name'])?$objective['name']:'' }}" class="form-control" style="margin-bottom: 0px;" placeholder="objective name" />
<small id="error_objectivename" class="hidden" style="color: red;margin-left: 1%;font-size: 13px;height:40px;">Enter a Objective Name</small>
</div>
</div>
<div class="col-md-3">
<div class="form-group col-sm-12">
<label for="description">Weight</label>
<input class="form-control" maxlength="2" value="{{ isset($objective['weight'])?$objective['weight']:'' }}" type="number" name="objectives[weight]" placeholder="%" min="1" max="100" style="margin-bottom: 1px;">
<small id="error_objectiveweight" class="hidden" style="color: red;margin-left: 1%;font-size: 13px;height:40px;">Add Weight</small>
</div>
</div>
<div class="col-md-4">
<div class="form-group col-sm-12">
<label for="description">Description</label>
<textarea name="objectives[description]" class="form-control" id="objectivedescription" style="resize: none;height:40px;" placeholder="enter descriprion">{{ isset($objective['description'])?$objective['description']:'' }}</textarea>
</div>
</div>
<div class="col-md-1">
<span class="badge badge-pill delete-form" style="color: red !important; background: transparent !important; height:50px; padding-left: 50px; padding-top:40px; padding-right:60px;cursor: pointer;">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</span>
</div>
</div>
<div class="row" >
<div class="form-group col-md-11">
<table class="table table-bordered table-condensed" id="kpis_table" >
<thead>
<tr>
<th scope="col" class="width-25-per">KPI Name</th>
<th scope="col" class="width-25-per">Weight</th>
<th scope="col" class="width-20-per">Description</th>
<th scope="col" class="width-25-per">Expected Delivery</th>
<th scope="col" class="width-10-per">Goal</th>
<th scope="col" class="width-10-per"></th>
</tr>
</thead>
<tbody class="addKpis" id="kpis_row_data">
#include('organization::objectiveAddKpi')
</tbody>
</table>
</div>
</div>
</div>
<div class="row col-md-10 col-md-offset-1">
<div class="row col-md-12">
<button class="newkpibtnn" data-objective-index="{{ $index }}" type="button" style="width:200px; float: left; padding: 5px;background-color:#a3d84e; border: 1px solid #fff; color: #fff;">Add new KPI</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
My routes.php file
Route::post('/add_objective', 'OrganizationController#addScorecardObjective')->name('add_scorecard_objectives');
Route::post('/add_kpis', 'OrganizationController#addKpi')->name('add_objectives_kpis');
This is my controller
public function addScorecardObjective(Request $request)
{
$data = $request->all();
unset($data['expected_delivery_date']);
$data['objectives'] = array(['name'=>'','weight'=>'','description'=>'','kpis'=>[
['name'=>'','weight'=>'','description'=>'','expected_delivery_date'=>'','goal'=>'']
]]);
return view('organization::objectiveAdd')->with([
'scorecard'=>$data
]);
}
public function addKpi(Request $request)
{
$data = $request->all();
$objectiveIndex = $data['objectiveIndex'];
$data['objectives'] = array($data['objectives']);
$data['objectives'][$objectiveIndex]['kpis'] = array(['name'=>'','weight'=>'','description'=>'','expected_delivery_date'=>'','goal'=>'']);
return view('organization::objectiveAdd')->with([
'scorecard'=>$data
]);
}
I want to be able to add a number of kpis in a particular objective whenever I click on add new objective button on that particular objective.