Answers for "inner element click trigger the parent click event"

inner element click trigger the parent click event

You need to use event.stopPropagation()

Inline:
<input class="form-control" onclick="event.stopPropagation()">

Using a function:
<input class="form-control" onclick="buttonClicked(event)">

<script>
function buttonClicked(event){
	event.stopPropagation();
    
	// continue performing button click actions
}
</script>