McGansWebsite/admin/application/views/subject/add_subject.php

<link href="<?=base_url();?>/assets/datatables/plugins/bootstrap/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<?php $this->load->view('includes/header');?>
<!--select2-->
<link href="<?=base_url();?>assets/select2/css/select2.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url();?>assets/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="page-container">
	<!-- start sidebar menu -->
	<?php $this->load->view('includes/sidebar');?>
	<!-- start page content -->
	<div class="page-content-wrapper">
		<div class="page-content">
			<div class="page-bar">
				<div class="page-title-breadcrumb">
					<div class=" pull-left">
						<div class="page-title">Add Subject</div>
					</div>
					<ol class="breadcrumb page-breadcrumb pull-right">
						<li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="<?=base_url();?>/dashboard">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
						</li>
						<li>&nbsp;<a class="parent-item" href="<?=base_url();?>/subject">Subject</a>&nbsp;<i class="fa fa-angle-right"></i>
						</li>
						<li class="active">Add Subject</li>
					</ol>
				</div>
			</div>
			<!-- Midium Model -->
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="card card-box">
						<div class="card-head">
							<header>Subject</header>	
						</div>
						<div class="card-body" id="bar-parent">
							<form class="form-horizontal" action="<?=base_url();?>add-subject" enctype="multipart/form-data" method="post">
								<div class="form-body">
									<div class="form-group row">
										<label class="control-label col-md-3">Studio Title
											<span class="required"> * </span>
										</label>
										<div class="col-md-5">
											<input name="subject" type="text" data-validation="required" placeholder="Enter Studio Title" class="form-control input-height" /> </div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3">Studio Focus
										</label>
										<div class="col-md-5">
											<input name="subtitle" type="text" placeholder="Enter Studio Focus" class="form-control input-height" /> </div>
									</div>									
									<div class="form-group row">
										<label class="control-label col-md-3">Studio Code
											<span class="required"> * </span>
										</label>
										<div class="col-md-5">											
											<input type="text" name="subjectCode" data-validation="required" placeholder="Enter Subject Code" class="form-control input-height">
										</div>
									</div>
									
									<div class="form-group row">
										<label class="control-label col-md-3">Degree
											<span class="required"> * </span>
										</label>
										<div class="col-md-5">												
											<select class="form-control select2" name="degree" data-validation="required">
												<option value=""></option>
												<?php
												   if(isset($degree) && $degree->num_rows()>0)
												   {
													   foreach($degree->result() as $list)
													   {
														   ?> <option value="<?=$list->id;?>"><?=$list->name;?></option><?php
													   }
												   }
											?>     
											</select>													
										</div>
									</div>
									
									<div class="form-group row">
										<label class="control-label col-md-3">Faculty
											<span class="required"> * </span>
										</label>
										<div class="col-md-5">												
										<select id="multiple" name="faculty[]" class="form-control default select2-multiple" multiple data-validation="required">
											<option value="">Select..</option>
												<?php
												   if(isset($faculty) && $faculty->num_rows()>0)
												   {
													   foreach($faculty->result() as $list1)
													   {
														   ?> <option value="<?=$list1->id;?>"><?=$list1->name;?></option><?php
													   }
												   }
											?>     
										</select>													
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3">Teaching Assistant
										</label>
										<div class="col-md-5">
											<select name="assistant[]" class="form-control default select2-multiple" multiple data-validation="required">
											<option value="">Select..</option>
												<?php
												   if(isset($faculty) && $faculty->num_rows()>0)
												   {
													   foreach($faculty->result() as $list1)
													   {
														   ?> <option value="<?=$list1->id;?>"><?=$list1->name;?></option><?php
													   }
												   }
											?>     
										</select>
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3">Profile Images
										</label>
										<div class="col-md-5 compose-editor">
											<input type="file"  name="profileImage" class="form-control default" data-validation="required">
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3">Description
										</label>
										<div class="col-md-5 compose-editor">
											<textarea type="file"  name="description"  placeholder="Enter Subject Description" class="form-control default" ></textarea>
										</div>
									</div>
									<div class="form-group row">
												<label class="control-label col-md-3">Title & Image
												</label>
												
												<div class="col-md-2 compose-editor">
													<input name="title[0]" id="subjectTitle_0" type="text" class="form-control default">
												</div>
												<div class="col-md-2 compose-editor">
													<input name="profileimage[0]" id="subjectImage_0" type="file" class="form-control default">
												</div>
												<div class="col-md-1">
											<div class="add-new-button-blue addMore"><span class="btn btn-primary">Add <i class="fa fa-plus"></i></span></div>
									        </div>
											</div>		
											<!---Duplicate ---->
											<input type="hidden" value="0" id="view"/>
											<div class="form-group duplicate1 row hide" id="imageTemplate" > 
												<label class="control-label col-md-3">
												</label>	
												<div class="col-md-2 compose-editor">
													<input name="titles[]" id="subjectTitle" type="text" class="form-control default">
												</div>
												<div class="col-md-2 compose-editor">
													<input name="profileimages[]" id="subjectImage" type="file" class="form-control default">
												</div>
												<div class="col-md-1">
											<div class="add-new-button-blue removeButton"  id="cat_add_id"><span class="btn btn-danger">Remove <i class="fa fa-minus"></i></span></div>
									        </div>
											</div>		
											<!---Duplicate ---->
									</div>								
								</div>
								<div class="form-actions">
									<div class="row">
										<div class="offset-md-3 col-md-9">
											<input type="submit" name="submit" class="btn btn-info m-r-20" value="Submit">
											<button type="button" class="btn btn-default">Cancel</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal -->
		</div>
	</div>
</div>
<?php $this->load->view('includes/footer');?>
 <script src="<?=base_url();?>assets/select2/js/select2.js"></script>
<script src="<?=base_url();?>assets/select2/js/select2-init.js"></script>
<script src="<?=base_url();?>assets/jquery.form-validator.min.js"></script>
<script>
//multiple add more
invIndex = 0;
$('body').on('click','.addMore', function() {

invIndex++;
var $template = $('#imageTemplate'),
	$clone    = $template
	.clone(true)
	.removeClass('hide')
	.removeAttr('id')
	.attr('data-book-index', invIndex)
	.insertBefore($template);

	// Update the name attributes  
	$clone
	.find('[id="subjectTitle"]').attr('id', 'subjectTitle_'+invIndex).end()
	.find('[id="subjectImage"]').attr('id', 'subjectImage_'+invIndex).end()
	
	.find('[name="titles[]"]').attr('name', 'title['+invIndex+']').end()
	.find('[name="profileimages[]"]').attr('name', 'profileimage['+invIndex+']').end()
	
})

.on('click', '.removeButton', function(){
	var $row  = $(this).parents('.duplicate1'),
	index = $row.attr('data-book-index');
	$row.remove();
	 
   
});
</script>