Develop Reference

I have a dynamic html template. Which forms when I click on a button. Now, the problem is When I click on one button all buttons are clicked

Here is the html template forms when I click on a button.
<div class="detail">
<h3>${element.name}</h3>
<p>Phone: ${element.phone}</p>
<button onclick="addToHistory()">Call</button>
</div>`
Let's say it creates two template as it is.
<div class="detail">
<h3>Person1</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory()">Call</button>
</div>`
<div class="detail">
<h3>Person2</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory()">Call</button>
</div>`
Now, I want to click on one button and then according to my click I want the data of clicked divs should store.
I tried this using event handler as you can see with addToHistory() function. But, it stores all the data both I clicked and not clicked also.
Please note: I want to do this only using JavaScript. Thank you for your support.

You can pass this into your method and use that to traverse within the specific detail container where the button was clicked.
this will reference the specific element the event occurs on
function addToHistory(el){
console.log(el.previousElementSibling.textContent);
}
<div class="detail">
<h3>Person1</h3>
<p>Phone: 0999999999</p>
<button onclick="addToHistory(this)">Call</button>
</div>`
<div class="detail">
<h3>Person2</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory(this)">Call</button>
</div>`

Method not called on blur event applied to span element

I would like the following method to be run:
setHeroButtonTextOption(heroButtonText) {
this.builderComponentsService.setPageComponentById(this.componentId, 'heroButtonText', heroButtonText);
}
Each time the user loses focus of the following element:
<div class="builder-components hero-button-click button-outer-container text-center text-md-left mt-5">
<div (click)="selectHeroButton($event, componentId + '-button')"
[attr.data-cy]="'hero-button-container'" [class]="setActiveElement('button')"
[ngClass]="setHeroClass('hero-button')" class="builder-components hero-button-click button-container"
id="{{componentId}}-button" style="display:inline-block">
<button [attr.data-cy]="'hero-button'" [ngStyle]="heroButtonStyle"
class="builder-components hero-button-click btn hero-button">
<span (blur)="removeLineBreaks($event); setHeroButtonTextOption($event.target['innerText']);"
(keydown.enter)="setHeroButtonTextOption($event.target['innerText']); $event.preventDefault()"
[attr.contenteditable]="setContentEditable()" [attr.data-cy]="'hero-button-text'"
[innerText]="heroButtonText" class="builder-components hero-button-click">
</span>
</button>
</div>
</div>
Currently, it isn't happening even though I have a blur event on <span>. How can I fix this?

The blur event will be raised from the button, not the span. If you are trying to include the innerText of the span with the event handler, it looks like it is already bound with heroButtonText, which you can pass as a function argument or reference from the component.
<button (blur)="setHeroButtonTextOption(heroButtonText)">
<span>{{ heroButtonText }}</span>
</button>
Edit - The button should be emitting that blur event. If that isn't working you will need to post more code, it could be that removeLineBreaks($event) is throwing an error, preventing the next call from being made.

HTML element in button prevents disabled in the wrapper element

Fiddle: http://jsfiddle.net/0o1mrapd/20/
Angular stackblitz link: https://stackblitz.com/edit/angular-fhtaki?file=src%2Fapp%2Fapp.component.html
I have a complex case which i need some enlightenment. (For angular developers, you can think the wrapper div as a host selector, <my-button></my-button>)
As you can see in the fiddle I have a disabled button with a wrapper div which has a click event.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span>Click</span>
</button>
</div>
What I expect is that when I click on that area, nothing will happen but alas I get the alert. If I remove the span element and put plain text inside the button, this works.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
Click
</button>
</div>
How can I make the div unclickable in this case? I found out that pointer-events: none does the trick but then I lose the curser-event which I need for accessibility
I stumbled upon this issue while creating a custom button component with an ng-content in Angular but then realized this is bigger than the framework.
Some links i checked:
Can you prevent an Angular component's host click from firing?
Add CSS cursor property when using "pointer-events: none"
How to stop event propagation with inline onclick attribute?
https://github.com/angular/angular/issues/9587

Maybe this example will be useful
function clickHandler() {
console.log('Click');
}
<div onclick="return false;">
<button onclick="clickHandler()">
Click
</button>
</div>

You can use this css property to avoid click event be fired in the span tag. It could be a workaround.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span style="pointer-events:none;">Click</span>
</button>
</div>

Want to get the previous input from the button where I click on it

I want to get the previous input id from the button (point of view).
With the needs of my website, there will be at least 8 inputs like this and buttons of course.
So in order to facilite the task and avoid writing one function by input, I think this is way better to get the id of the 'previous' input from the button where I click.
I've browsed StackOverflow, but found nothing interesting in my case.
So here is the HTML code :
<div class="col-sm-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" ><i class="fas fa-link"></i></span>
</div>
<input type="text" name="first_map_link" class="form-control" id="first_map_link" placeholder="Lien première map...">
</div>
</div>
<div class="row">
<div class="col-sm-1">
<button class="btn btn-outline-info btn-get-infos"><i class="fas fa-search"></i></button>
</div>
</div>
I've tried with that : Undefined
$('.btn-get-infos').closest('input').attr('id')
Same with siblings. jQuery solution is prefered.
Thanks in advance

The issue is because closest() goes up the DOM looking for parent elements, while the input you want to find is a child of a sibling to a parent of the button you click on. With that in mind you'll need a combination of closest(), prev() and find(), like this:
var id = $('.btn-get-infos').closest('.row').prev('.col-sm-3').find('input').prop('id')

You'll need to walk up and down the DOM properly to find reference. Something like this:
$('.btn-get-infos').prev().find('input').attr('id');
Or if you're firing a click event, it can use the this keyword:
$this = $(this); //ref to the button clicked
$this.prev().('input').attr('id');
Give that a go and let us know if it works, dude. attr() i think was deprecated a while back, so new practise is to use prop().
Edit: I realise now that prev() only looks through previous siblings - ignore me :)

Strip element of Knockout binding

Quick question that I am probably just having a hard time asking correctly and therefore having a hard time figuring out how to accomplish this -
http://jsfiddle.net/RsKUS/
When I click on the div I want to take one action but if there is a button nested inside the div I only want to perform that action, not both.
<div data-bind="click: clickOne">
<p>It's here too...</p>
<button data-bind="click: clickTwo">Child</button>
</div>

You need to set the clickBubble: false on the inner handler to prevent the click event bubbling:
<div data-bind="click: clickOne">
<p>It's here too...</p>
<button data-bind="click: clickTwo, clickBubble: false">Child</button>
</div>
Demo JSFiddle.
See also in the click binding documentation: Note 4: Preventing the event from bubbling