We Keep Coding

Problem loading JS when creating and modifying an element

I hope you can help me with these problems that I have with the execution of my JS, I have 2 problems that I will detail:
WHEN CREATING
I am using the change and select events to be able to know if I am selecting and changing an option from my question combobox. The problem is when I have selected the option 1 SINGLE / MULIPLE ANSWER of the question type. If when saving I do not have any checkbox selected from the available options, it will throw me the alert to select at least one option, so far everything works fine for me but when I select a checkbox from the options and try to save, the alert does not disappear. I've tried adding the event checked but it can't work for me. What I want to do is that when I save and I do not have an option selected, it throws me the alert message (this already does), and when I select an option, the alert disappears so that it allows me to save.
WHEN MODIFYING
The second problem occurs when I try to modify an element, the JS does not run, so that it can work I have to select another option and return to the previous one so that it can work.
HTML
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-opcion">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-opcion btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="opcion-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
JS
$(".dynamicform_wrapper").on("change","select",function(){
if ($(this).val()== 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan',2);
}else if ($(this).val()== 1){
//var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;
var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;
$('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.question').removeAttr('colspan',2);
$( "#dynamic-form" ).submit(function( event ) {
if(numberChecked > 0){
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});
event.preventDefault();
}
});
}});
Hope you can help me with these problems, I am not very good at using javascript or jquery. I thank you in advance for your support.

In your current code you are using wrong selector to get total value of checked checkboxes.If you check your current jquery code its always giving 0 even if you checked any value. So , you can use input[type="checkbox"]:checked which will give you correct values of checked checkboxes.
Then , you have placed your submit event inside your change event that's the reason the warning shows for the first time but when you select some checkbox and again clicked save button it doesn't go away (also because of wrong selector) so i have separated it from the change event .
Also you have forget to show the tr which you have hide() when select-box value is 2 i.e : item-option so add .show() to it when value is 1.
Working Code :
$(".dynamicform_wrapper").on("change", "select", function() {
if ($(this).val() == 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan', 2);
} else if ($(this).val() == 1) {
// $('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.option-item:first').show(); //show option-item which is hidden
$('#0').find('.question').removeAttr('colspan', 2);
}
});
$("#dynamic-form").submit(function(event) {
//getting all inputs which is under tr
var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;
console.log("No of checkbox checked=" + numberChecked)
if (numberChecked > 0) {
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
event.preventDefault();//remove this to submit
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({
'border': '2px solid #dd4b39',
'background-color': 'white'
});
event.preventDefault();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-option">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="option-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
<br>
<br>
<br>
<br>

Using JavaScript: Using a modal class when i am editing a specific html table row. how to select the current value on a dropdownlist?

I am new in this!
I have a table of content with the tag [Name, Gender and Age]. When editing a line, using the modal class, the dropdownlist doesn't take the select table value as the default value on the dropdownlist, it will show it empty.
Tx!
AC
<div class="modal fade" id="modal-edit">
<div class="modal-dialog">
<div class="modal-content">
<form action="page.php" method="POST" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="item0" id="item0" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<select class="form-control select2" name="item1" id="item1" >
<option></option>
<option>Female</option>
<option>Male</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input name="item2" id="item2" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="Submit" name="update" class="btn btn-primary">Edit</button>
</div>
</form>
</div>
</div>
</div>

Check my snippet and its working fine as your need & instructions with using of select2 plugin for drop-down Gender selection.
I hope below snippet will help you lot.
$(document).ready(function(){
$('.select2').select2({
minimumResultsForSearch: -1 //Search field hide
});
});
$('#modal-edit').on('show.bs.modal', function(e) {
// e.relatedTarget -> to find which button clicked
var getName = $(e.relatedTarget).parents()[1].cells[0].innerText;
var getGender = $(e.relatedTarget).parents()[1].cells[1].innerText;
var getAge = $(e.relatedTarget).parents()[1].cells[2].innerText;
$('#item0').val(getName);
$('#item1').val(getGender);
$('#item2').val(getAge);
$(".select2").select2({minimumResultsForSearch: -1}); //after value set in drop-down list then again reinitialize
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<br>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th width="120">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky</td>
<td>Male</td>
<td>40</td>
<td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
</tr>
<tr>
<td>Mikolo</td>
<td>Female</td>
<td>38</td>
<td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
</tr>
<tr>
<td>Simora</td>
<td>Female</td>
<td>28</td>
<td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
</tr>
<tr>
<td>Raeesh</td>
<td>Male</td>
<td>29</td>
<td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
</tr>
<tr>
<td>Yuvraj</td>
<td>Male</td>
<td>37</td>
<td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-edit">
<div class="modal-dialog">
<div class="modal-content">
<form action="'.$page.'" method="POST" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="item0" id="item0" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<select class="form-control select2" name="item1" id="item1" data-width="100%">
<option value="Female">Female</option>
<option value="Male">Male</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input name="item2" id="item2" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="Submit" name="update" class="btn btn-primary">Save & Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/js/select2.min.js"></script>

I think you want show default value in drop down like this.
add value for each option in select box and make one option selected by add selected attribute.
<select class="form-control select2" name="item1" id="item1" >
<option selected>Please Select Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
edited
<script>
var gender='male'; // you variable may have value 'male' or 'female'
$('#item1').val(gender);

Dynamically setting the 'selected' attribute of Select list in Bootstrap Modal

I have a Bootstrap modal that is triggered by a link that passes in a number of parameters which displays a select list for users to choose a rating between 1 and 5. This part is working well, but I now need to have the select menu display the value for the current rating instead of defaulting to 1 which is the first value in the list.
Here's my code:
$(document).ready(function() {
$('#editRatingModal').on('show.bs.modal', function(e) {
recID = $(e.relatedTarget).data('rec-id');
clickedlink = e.relatedTarget;
currentRating = clickedlink.getAttribute('currentRating');
contactName = clickedlink.getAttribute('contactName');
modalTitle = 'Edit Rating for ' + contactName;
$('#editRatingModalTitle').html(modalTitle);
$("#projectContactRecID").val(recID);
//hide error/success alerts if previously showing
$("#ajaxError1").hide();
$("#ajaxSuccess1").hide();
$("#callContact1").prop("disabled", false);
console.log(recID);
console.log(currentRating);
console.log(contactName)
});
}); //]]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-hover table-bordered">
<tbody>
<tr>
<td>Click Starts to Edit Rating</td>
<td>
<a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal">
<div><span class="stars-container stars-80">★★★★★</span></div>
</a>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editRatingModalTitle">Edit Rating</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editRatingFrom" action="projectDetails.php" method="post" role="form">
<input type="hidden" name="recid" value="16103">
<input type="hidden" name="projectContactRecID" value="" id="projectContactRecID">
<input type="hidden" name="action" value="editRating">
<div class="form-group">
<label for="newRating">Select Rating</label>
<div class="input-group col-xs-8">
<select class="form-control" name="newRating" id="newRating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Rating</button>
</div>
</form>
</div>
</div>
</div>
The currentRating variable contains the value that I want to add the selected attribute to in the select list, but not sure how to achieve this?

You can simply set the value to #newRating.
$(document).ready(function() {
$('#editRatingModal').on('show.bs.modal', function(e) {
recID = $(e.relatedTarget).data('rec-id');
clickedlink = e.relatedTarget;
currentRating = clickedlink.getAttribute('currentRating');
contactName = clickedlink.getAttribute('contactName');
modalTitle = 'Edit Rating for ' + contactName;
$('#editRatingModalTitle').html(modalTitle);
$("#projectContactRecID").val(recID);
//hide error/success alerts if previously showing
$("#ajaxError1").hide();
$("#ajaxSuccess1").hide();
$("#callContact1").prop("disabled", false);
$('#newRating').val(currentRating) // set the current rating
console.log(recID);
console.log(currentRating);
console.log(contactName)
});
}); //]]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-hover table-bordered">
<tbody>
<tr>
<td>Click Starts to Edit Rating</td>
<td>
<a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal">
<div><span class="stars-container stars-80">★★★★★</span></div>
</a>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editRatingModalTitle">Edit Rating</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editRatingFrom" action="projectDetails.php" method="post" role="form">
<input type="hidden" name="recid" value="16103">
<input type="hidden" name="projectContactRecID" value="" id="projectContactRecID">
<input type="hidden" name="action" value="editRating">
<div class="form-group">
<label for="newRating">Select Rating</label>
<div class="input-group col-xs-8">
<select class="form-control" name="newRating" id="newRating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Rating</button>
</div>
</form>
</div>
</div>
</div>

How to show specific divs with bootstrap button using jquery

I have three buttons ADD, SPILLAGE, and SPOILAGE.
How do I show only the Add container when I press the Add Button and hide the Add Container if I press Spillage button?
Here's my snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#add">Add</button>
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#spoiled">Spoiled</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#spilled">Spilled</button>
<div id="add" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>
<div id="spoiled" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>
<div id="spilled" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>

Use the data-target to show the desired div
$('.collapse').hide();
$(".btn").click(function() {
$('.collapse').hide();
var $thisdata = $(this).attr('data-target');
console.log($thisdata)
$($thisdata).show()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#add">Add</button>
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#spoiled">Spoiled</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#spilled">Spilled</button>
<div id="add" class="collapse"><br/> add
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>
<div id="spoiled" class="collapse"><br/> spoiled
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>
<div id="spilled" class="collapse"><br/> spilled
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>

Use this code:
<!DOCTYPE html>
<html>
<head>
<style>
.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('#showdiv1').click(function() {
$('div[id^=div]').hide();
$('#div1').show();
});
$('#showdiv2').click(function() {
$('div[id^=div]').hide();
$('#div2').show();
});
$('#showdiv3').click(function() {
$('div[id^=div]').hide();
$('#div3').show();
});
$('#showdiv4').click(function() {
$('div[id^=div]').hide();
$('#div4').show();
});
})
</script>
</head>
<body>
<div class="main_div">
<div class="buttons">
<a class="button" id="showdiv1">Menu 1</a> | <a class="button" id="showdiv2">Menu 2</a> | <a class="button" id="showdiv3">Menu 3</a> | <a class="button" id="showdiv4">Menu 4</a>
</div>
<div class="inner_div">
<div id="div1" style="display:none;">Hello, I'm Container one</div>
<div id="div2" style="display:none;">Hello, I'm Container two</div>
<div id="div3" style="display:none;">Hello, I'm Container three</div>
<div id="div4" style="display:none;">Hello, I'm Container four</div>
</div>
</div>
</body>
</html>
Remove online jquery link and add local file path.

How to delegate event in case of button child is in the parent class under a modal

The problem I am dealing with is to delegate an event in case of a click. The html modal snippet is:
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
And the jquery code is:
$(".deleteMe").on("click",".cooldiv",function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",".cooldiv",function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
So, basically I want to add or remove options (add/remove class cooldiv) when the + or x buttons are clicked. But it's not happening this way.
UPDATE:
The complete code is this:
<?php require "login/loginheader.php";
$questionCounter = 1;
$optCounter = 1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="login/js/jquery-2.2.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="login/js/bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addQues">Input Question No. <?php echo $questionCounter ?></button>
<!-- Modal -->
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="form-signin">
<div class="alert alert-success">You have been <strong>successfully logged in</strong>.</div>
Logout
</div>
</div> <!-- /container -->
</body>
</html>
<script>
$(".deleteMe").on("click",'.cooldiv',function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",'.cooldiv',function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
</script>
When I click on Input Question No. 1/2..., a modal opens up with option # and option text in it. I want when the button + or x is clicked, another option field with option # and option text adds or the same gets removed. Without delegation, it won't happen, but using delegation like this, it's not even working.

The problem is not related to even delegation, but to wrong usage of events and dynamic elements.
You should use
$("#optList").on("click",'.deleteMe',function(){
and
$("#optList").on("click",'.addNext',function(){
Because the #optList element exists all the time, and the new elements that you add dynamically are .deleteMe and .addNext.
Here is the jsfiddle that should work as you expected:
https://jsfiddle.net/ev6kajjf/7/
(note that you still have problems there with the value of optCount. I'm not sure why it has i to start with: <input type="hidden" id="optCount" name="optCount" value="i">).