We Keep Coding

Why I can apply JS/Jquery function to a button specific ID, but can't link to his class?

I'm trying to apply a function when a button is pressed, but sometimes the button is appended, so I tried to apply the function to his class. The problem is that I can only make the function work when I link it to the button ID, when I link the class nothing happens. This happens to the button that is appended and to the normal button as well.
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
If I change the .createCustomLayer for #createCustomLayer, all works fine.

You can't have multiple class="" move createCustomLayer into class="btn btn-light form-control", so it looks like class="btn btn-light form-control createCustomLayer"
Demo
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>

This is because you have more than one class attribute in the element. If you have multiple class attribute in the same element then except the first one all are simply ignored:
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>

How to capture two same id but different class in addEventListener

first of all, thank you for your time to read this question, and two things, I'm using ES5 and I don't use jQuery.
Right now I'm struggling a lot to figure what's the correct solution for the addEventListener, because for some reason it does not trigger for the second button which is only for the mobile screen dimensions, the problem is that the second button have the same id but different class, for example this:
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
{/* Desktop screen button */}
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
{/* Mobile screen button */}
<button id="buy-now" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>
Where I am trying to trigger the second button but it does not where I don't understand why it does, if the id is the same, should not matter, so I'm trying to figure how to trigger from the first button if it's clicked and also with the second if it's clicked, but I'm out of ideas...
var button = document.getElementById('buy-now');
if (!button) {
return;
}
button.addEventListener('click', function trackAddToCart() {
// more code for the event
}
I thought an idea to capture the attribute of the button, but it works in the first button but not for the second one:
var button = document.getElementById('buy-now');
var att = button.getAttribute('class');
button.addEventListener('click', function() {
console.log('class ' + att); //shows: class: btn btn-lg hidden-sm-down btn-primary
console.log('button class? '+ button); //shows: button element: [object HTMLButtonElement]
});
But when I click the second button... does not trigger or happening nothing, not sure why... and I can't change the id value (which it should be easy but I can't "company standard")
Can anyone help me to have an idea how to capture and trigger the event for the second button ??

The attribute id must be unique in a document. You can use attributeStartsWith selector or class with querySelectorAll(). Then loop through all the button to attach the event (click) individually:
//var button = document.querySelectorAll('.btn.btn-primary');
var button = document.querySelectorAll('[id^=buy-now]');
button.forEach(function(btn){
btn.addEventListener('click', function() {
console.log('class ' + this.classList);
console.log('button class? '+ this.id);
});
});
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
<button id="buy-now2" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>

nextElementSibling seems working in this case.
var btn1 = document.getElementById("btn");
var btn2 = btn1.nextElementSibling;
btn1.addEventListener("click",function(e){
console.log("btn1");
});
btn2.addEventListener("click",function(e){
console.log("btn2");
});
<div>
<button id="btn" class="btn1">butotn 1</button>
<button id="btn" class="btn2">butotn 2</button>
</div>

Change .innerHTML property

I am trying to change or add: data-dismiss="modal" to the innerHTMl of a button from within a <script type="text/javascript">.
<button type="button" id="verifyButton" name="verifyButton" data-dismiss="" onclick="VerifyMembership()" class="btn btn-primary" >Verify Membership #</button>
The first time the button is clicked it goes to the onclick function
function VerifyMembership() {
document.getElementById("verifyButton").className = "btn btn-success";
document.getElementById("verifyButton").innerHTML = ('Continue <i class="fa fa-check"></i>');
Im wondering how to change or add data-dismiss="modal"to the innerHTML ?
The 2nd time the button is clicked it changes to a "continue" then needs to close a "modal" alert.

You can set attribute as document.getElementById("verifyButton").setAttribute("data-dismiss", "modal"); or may be document.getElementById('verifyButton').dataset.dismiss = "modal" works

document.getElementById("verifyButton").setAttribute("data-dismiss", "Modal-or-anything");

Pressing enter on child modal dialog fires enter on parent modal dialog (ie11 and edge)

I have two bootstrap modal dialog windows, one creates the other. When enter is pressed on the child's text input it fires an event on the parent as well. The last button to have focus on the parent was the one to create the child, this causes the child to be recreated immediately.
I have found some similar problems which state to make sure the ok buttons on the dialog are of type=button since they default to submit. I have made sure that the buttons have the type of button but the issue persists, though it works fine in chrome.
Here an example of what is happening in plunker.
This is the first modal window.
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="shownewwindow()">New Modal</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
And here is the second.
<script type="text/ng-template" id="modal2.html">
<div class="modal-body">
<input type=textarea value="test" ng-keypress="keydown($event)" autofocus></input>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="ok()">ok</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
Here are the functions for ok, cancel, and keydown.
$scope.ok = function () {
console.log("ok");
$uibModalInstance.dismiss({completed: true});
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.keydown = function(event) {
var enterKeyCode = 13;
$uibModalInstance.dismiss({completed: true});
}
Any ideas on how to prevent the child from being created repeatedly when enter is pressed would be appreciated, thanks.

Try to disable the button when you click on it.
<button ng-disabled="aScopeVar" ng-click="setAScopeVarToTrue()">My button</button>
Don't forget to set aScopeVar to true after the child is created.

universal button self add class

is it posible to make a universal jquery for basically all buttons in my code with diferent ids? i cant seem to get this to work. what im trying to achieve is everytime a button is clicked the javascript will add a class for that specific button that was clicked.
HTML :
<button type="button" onClick="myFunction(this.id)" id="test1" class="btn btn-primary btn-xs pull-right">button 1</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
JS :
function myFunction(this) {
$(this).addClass("animated flipInY");
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
}

You can use click event with button selector and it will work for all your button :
$('button').on('click', function(){
$(this).addClass('animated flipInY');
}
Hope this helps.

I think the problem you have is more related with calling the "removeClass" for all buttons...
For that you need to change
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
to
setTimeout(function(){
$('button').removeClass("animated flipInY")
},1000);
in your code (or better add it to Zakaria answer).