We Keep Coding

Clone or Add more fields using jquery including the functionality

So I have a select group of reason and other select-group for subreason. I want to add more reason but as soon as I click on the button the same field appear but it changes the value of above fields too. I need them to be independent but also perform the (reason -subreason).
Code
<div class="tab" id="add_reason">
<h4 class="card-title">Reason</h4><Br>
<label for="roads">Select Branch</label>
<select name="reason[]" id="reason" class="form-control required">
<option value="">Reasons</option>
<option class="road" value="Road">Road</option>
<option class="driver" value="Driver">Driver's Fault</option>
</select><br>
<select id="subreason" name="subreason[]" class="form-control">
<optgroup label="Road" required>
<option>Pot Holes</option>
<option>No boards at starting and ending point of Bridge</option>
<option>No Painting to Divider</option>
<option>Speed Breaker without Zebra Crossing</option>
</optgroup>
<optgroup label="Driver" required>
<option>Lane Cutting</option>
<option>Overtaking from Wrong side</option>
<option>Corner Overtaking</option>
</optgroup>
</select>
<button type="button" class="btn btn-primary" id="btn-reason">Add Reasons</button>
</div>
Script
$(document).ready(function(){
var $optgroups = $('#subreason > optgroup');
$("#reason").on("change",function(){
var selectedVal = this.value;
$('#subreason').html($optgroups.filter('[label="'+selectedVal+'"]'));
});
});
$(document).ready(function(){
$("#btn-reason").click(function(){
$('#add_reason').clone(true).appendTo('#add_reason');
});
});

The first thing to know about jQuery .clone() is that it creates new DOM elements from some existing ones.
That implies the same rules as any other dynamically created elements:
Do not use ids
Delegate event handlers
Additionnally, the cloned set of elements cannot be appended multiple places... So, to use it as a templating trick, you have to clone twice. Once on page load (to save them before any change occurs) and once again when appending somewhere.
$(document).ready(function() {
// Cloned "templates"
let reason_wrapper = $(".reason-wrapper").clone()
var $optgroups = $(".subreason > optgroup").clone()
// "delegated" event handler for any existing or future .reason element
$(document).on("change", ".reason", function() {
var selectedVal = this.value;
$(this)
.closest(".reason-wrapper")
.find(".subreason")
.html($optgroups.clone().filter('[label="' + selectedVal + '"]'));
});
// "delegated" event handler for any existing or future .btn-reason element
$(document).on("click", ".btn-reason", function() {
reason_wrapper.clone().appendTo("#add_reason");
});
});
.reason-wrapper {
margin-top: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab" id="add_reason">
<h4 class="card-title">Reason</h4>
<div class="reason-wrapper">
<label for="roads">Select Branch</label>
<select name="reason[]" class="reason form-control required">
<option value="">Reasons</option>
<option class="road" value="Road">Road</option>
<option class="driver" value="Driver">Driver's Fault</option>
</select>
<br>
<select name="subreason[]" class="subreason form-control">
<optgroup label="Road" required>
<option>Pot Holes</option>
<option>No boards at starting and ending point of Bridge</option>
<option>No Painting to Divider</option>
<option>Speed Breaker without Zebra Crossing</option>
</optgroup>
<optgroup label="Driver" required>
<option>Lane Cutting</option>
<option>Overtaking from Wrong side</option>
<option>Corner Overtaking</option>
</optgroup>
</select>
<button type="button" class="btn btn-primary btn-reason">Add Reasons</button>
</div>
</div>

Form submission URL redirect doesn't work

Trying to create two dropdown lists where the 2nd has a dependency on the first, and the second contains URL values with a GO button that goes to the URL. I need to implement this in Elementor.
I am following the guidance of this article: Dependent Dropdown lists with go to url button and have created the following code, but the URL redirect part is not working. You can find the jsFiddle here: https://jsfiddle.net/jfsurbano/u26c0vb9/5/
When I implement this code into Elementor, the dropdown doesn't work either. What would be the possible reasons behind this?
Any advice would be greatly appreciated!!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
var $cat = $("#state"),
$subcat = $(".subcat");
$cat.on("change", function() {
var _rel = $(this).val();
$subcat.find("option").attr("style", "");
$subcat.val("");
if (!_rel) return $subcat.prop("disabled", true);
$subcat.find("[rel=" + _rel + "]").show();
$subcat.prop("disabled", false);
});
});
function goToNewPage() {
var url = document.getElementById('store').value;
console.log(url);
if (url != 'none') {
window.open = url;
}
}
</script>
<div class="ranking-div">
<div class="ranking-container">
<p class="dropdown-header">請選擇你想查詢的<span class="dropdown-title">危疾保險排行榜</span></p>
<div id="form-container">
<form id="formname" name="Sate-Store">
<select name="state" id="state">
<option value="">保險類別</option>
<option value="公司醫保">公司醫保</option>
<option value="自願醫保">自願醫保</option>
<option value="傳統醫保">傳統醫保</option>
<option value="危疾保險">危疾保險</option>
<option value="儲蓄保險">儲蓄保險</option>
<option value="意外保險">意外保險</option>
<option value="人壽保險">人壽保險</option>
</select>
<select disabled="disabled" class="subcat" id="store" name="store">
<option value>產品分類</option>
<!-- 公司醫保 -->
<option rel="公司醫保" value="http://www.google.com">公司醫療保險</option>
<!-- 自願醫保 -->
<option rel="自願醫保" value="www.google.com">標準計劃</option>
<option rel="自願醫保" value="www.google.com">靈活計劃(附加醫療)</option>
<option rel="自願醫保" value="www.google.com">靈活計劃(高端)</option>
<!-- 傳統醫保 -->
<option rel="傳統醫保" value="大眾醫療">大眾醫療</option>
<option rel="傳統醫保" value="高端醫療">高端醫療</option>
<!-- 危疾保險 -->
<option rel="危疾保險" value="定期危疾">定期危疾</option>
<option rel="危疾保險" value="儲蓄危疾(多次賠償)">儲蓄危疾(多次賠償)</option>
<option rel="危疾保險" value="儲蓄危疾(全面多次賠償)">儲蓄危疾(全面多次賠償)</option>
<!-- 儲蓄保險 -->
<option rel="儲蓄保險" value="儲蓄保險">儲蓄保險</option>
<option rel="儲蓄保險" value="派息保單">派息保單</option>
<option rel="儲蓄保險" value="短期儲蓄">短期儲蓄</option>
<option rel="儲蓄保險" value="傳承保單">傳承保單</option>
<option rel="儲蓄保險" value="傳統延期年金">傳統延期年金</option>
<option rel="儲蓄保險" value="可扣稅延期年金QDAP">可扣稅延期年金QDAP</option>
<!-- 意外保險 -->
<option rel="意外保險" value="意外保險">意外保險</option>
<!-- 人壽保險 -->
<option rel="人壽保險" value="定期人壽">定期人壽</option>
</select>
<input class="btn-submit" type=button value="立即查看" onclick="goToNewPage()" />
</form>
</div>
</div>
</div>

window.open() is a method. When you're calling window.open = url;, you're changing the definition of the function to a url string. Call it like this instead:
window.open(url);

Filter drop down jquery is not working on IE but is on Chrome/FF

I have this code working in Chrome and FF, but it is not working in IE. It is a simple form with 2 drop downs, with the second drop down filtering based on the first. The selection then brings you to a different site on Submit. In IE, the filtered options are greyed out rather than hidden.
<!DOCTYPE html>
<head>
<html>
<title>Dropdowns</title>
<script src="./jquery-1.11.0.min.js"></script>
<script>
function filterList(countryList) {
var selected = countryList.find(":selected").text();
if (selected == "US") {
showOption($("#city .US"));
hideOption($("#city .UK, .IE"));
}
else if (selected == "UK") {
showOption($("#city .UK"));
hideOption($("#city .US, .IE"));
}
else {
showOption($("#city .IE"));
hideOption($("#city .UK, .US"));
}
$("#city").find("option:not(:disabled):first").prop('selected', true);
}
function hideOption(option) {
option.attr("disabled", 'disabled');
option.hide();
}
function showOption(option) {
option.removeAttr('disabled');
option.show();
}
$(document).ready(function () {
var countryList = $("#country");
filterList(countryList);
$("#country").change(function () {
filterList($(this));
});
});
</script>
<script>
$(document).ready(function () {
var countryList = $("#country");
filterList(countryList);
$("#country").change(function(){
filterList($(this));
});
});
</script>
</head>
<body>
<div>
<h1>Please select your home city</h1>
</div>
<form name="dropdown" id="dropdown">
<div>
<select class="country" id="country" name="country">
<option value="United States">US</option>
<option value="United Kingdom">UK</option>
<option value="Ireland">IE</option>
</select>
</div>
<div>
<select class="city" id="city" name="city">
<!-- US options Below -->
<option value="http://www.google.ie" class="US">Chicago</option>
<option value="http://www.google.com" class="US">New York</option>
<option value="http://www.stackoverflow.com" class="US">Miami</option>
<!-- UK options Below -->
<option value="http://www.linkedin.com" class="UK">London</option>
<!-- Ireland options Below -->
<option value="http://www.ebay.com" class="IE">Ireland</option>
</select>
</div>
<div>
<input type="checkbox" name="checkbox" value="checkbox" />Remember my
selection<br />
</div>
<div>
<input type="button" value="Set as My Home" onclick=
"goToNewPage(document.dropdown.city)" />
</div>
</form>
</body>
</html>

Not all browsers support hiding option elements, IE for instance does not support hiding an option in any way.
The "greyed out" you're seeing is what happens when you disable an option, and you're not only hiding them, but disabling them as well.
As a sidenote, disabled in this context is a property, and you should be using
option.prop('disabled', true);
The cross browser way to filter options inside a select is to remove and insert the elements, not hide and show them.

Updating dom with select tag change listner

Got the following code:
<form action="./index.html" method="get">
<select class=" locationdropdown selectdropdown pull-right" id="prayerMethod">
<option value="ISNA">ISNA</option>
<option value="MWL">MWL</option>
<option value="Egypt">Egypt</option>
<option value="Makkah">Makkah</option>
<option value="Karachi">Karachi</option>
<option value="Tehran">Tehran</option>
<option value="Jafari">Jafari</option>
</select>
<input type="submit" value="SUBMIT" style="display:none;">
</form>
<script>
var mySelect = document.getElementById("prayerMethod");
$(mySelect).change(function(){
// $(this).parent('form').submit();
// alert(mySelect.options[mySelect.selectedIndex].value );
prayTimes.setMethod(mySelect.options[mySelect.selectedIndex].value );
});
</script>
I would like it to update the dom with the new value given by the select tag which is inputted into the prayTimes() method. How can I do that?

Multiple show / hide jquery

My code below is showing the proper city/state div's when the matching country is selected from the drop down, but it's not hiding the previous one if the user decides to select another state. Do I have to create an if/else each for each div i want to hide?
<script type="text/javascript">
$(document).ready(function() {
...
//city & state display
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label").hide();
else {
$("#state_label").show();
stateSelect.show();
}
});
});
</script>
html code:
<label>Country/Locale:</label>
<select id="ctry" name="country">
<option value="">-- Select</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
</select><br />
<!-- US -->
<div id="state_US" style="display:none">
<label id="state_label" style="display:none">State:</label>
<span class="rstate">
<select name="u_state">
<option value="">-- State US</option>
<option value="AL">Alabama</option>
</select>
</span>
Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
</div>
<!-- CA -->
<div id="state_CA" style="display:none">
<label id="state_label" style="display:none">Province:</label>
<span class="rstate">
<select name="c_state">
<option value="">-- Prov CA</option>
<option value="ON">Windsor</option>
</select>
</span>
Postal or Place:<input style="margin-left:43px;" type="text" name="locca" id="locca" size="30" />
</div>
<!-- GB -->
<div id="state_GB" style="display:none">
<label id="state_label" style="display:none">City or Region:</label>
<span class="rstate">
<select name="k_state">
<option value="">-- Place</option>
<option value="AU">UK!</option>
</select>
</span>
</div>
<!-- AU -->
<div id="state_AU" style="display:none">
<label id="state_label" style="display:none">City or Region:</label>
<span class="rstate">
<select name="a_state">
<option value="">-- Place</option>
<option value="AU">UK!</option>
</select>
</span>
</div>

Remove the state_label ids..
Add the unused class state to the state_CA, state_US etc. elements..
So each state group should be
<div id="state_US" class="state" style="display:none">
<label style="display:none">State:</label>
<span class="rstate">
<select name="u_state">
<option value="">-- State US</option>
<option value="AL">Alabama</option>
</select>
</span>
Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
</div>
And change your script to be
<script type="text/javascript">
$(document).ready(function() {
...
//city & state display
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
stateSelect.show();
});
});
</script>
Demo at http://jsfiddle.net/gaby/PYx2v/

You cannot have multiple elements with the same ID. Your label state_Label is not unique. You should change this, otherwise some browsers will not show your label.
You hide all elements having the css-class "state". But there is no element having this class. I guess that you need to add class="state" to all of your state_*-divs.

Something like this logic might work for you:
var previous;
$(document).ready(function() {
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0) {
$("#state_label").hide();
} else {
if (previous) {
previous.hide(function() {
$("#state_label").show();
stateSelect.show();
previous = stateSelect;
});
} else {
$("#state_label").show();
stateSelect.show();
previous = stateSelect;
}
}
});
});
Though it would be easier if they all had the same CSS class, with which you could easily hide them and then show the one that was selected.