Wsrtjtyk

I have this modal

 <div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">

            <div class="modal-dialog" role="document">

                <div class="modal-content">

                    <div class="modal-header">

                        <h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">×</span>

                        </button>

                    </div>

                    <div class="modal-body">

                        <form>

                           <div class="credit-scoring">

                                <label for="credit-scoring" class="form-control-label">Credit Scoring:</label>

                                <input type="text" class="form-control" id="credit-scoring">

                            </div>

                        </form>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                        <button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>

                    </div>

                </div>

            </div>

        </div>

and I would like to add text in <span id="bankAssessBondId"></span> when the following button is clicked

<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">

Bank Assess

</button>

as I have multiple buttons for this, I'm using an EventListener as follows

var buttons = document.getElementsByClassName('btn btn-success bank');

    for(var i=0; i<buttons.length; i++){

        buttons[i].on("click", function(){

             $('#bankAssessBondId').append($(this).value)

        })

}

but the 'click' button event is not detected. How can I fix this?

For elements that are dynamically generated you'll need to use the delegated events form of the JQuery on() function:

$('body').on('click', '.btn.btn-success.bank', function() {

    $('#bankAssessBondId').append($(this).value)

}

I've used "body" in this case as the parent element, but it could be any element that's a parent of the buttons.

When selecting an element with multiple classes then the selectors must be specified without spaces like below.

$('.btn.bank.btn-success')

Also in this, case the modal should be opened with the script as the span value inside modal needs to be changed dynamically.

$('#bankAssess').modal('toggle');

$(function() {





  $('.btn.bank.btn-success').click(function() {



    var val = $(this).attr("value");



    console.log(val);



    $('#bankAssessBondId').append(val);

    $('#bankAssess').modal('toggle');



  });





});

#bankAssessBondId {

  color: red;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">×</span>

                        </button>

      </div>

      <div class="modal-body">

        <form>

          <div class="credit-scoring">

            <label for="credit-scoring" class="form-control-label">Credit Scoring:</label>

            <input type="text" class="form-control" id="credit-scoring">

          </div>

        </form>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>

      </div>

    </div>

  </div>

</div>



<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond2">

Bank Assess

</button>



<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond3">

Bank Assess

</button>

You can get the button by its class name using

$(".bank").on('click', function () {

  alert('clicked');

    $('#bankAssessBondId').append($(this).attr('value'));

});

Also append the value of the button to the id="bankAssessBondId"

<span id="bankAssessBondId"></span>

<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">

Bank Assess

</button>

Using a sample of your code

Here is a working example.
https://codepen.io/anon/pen/oQGJOm

Your issue looks to be that you are trying to use the jQuery on with an element that was discovered not using jQuery. The way I see it you have two possible solutions depending on what you are trying to achieve.

1. 
   

   use the addEventListener

   
   
   

   var buttons = document.getElementsByClassName('btn btn-success bank');
   
   for(var i = 0; i < buttons.length; i++) {
   
       buttons[i].addEventListener("click", function(){
   
            $('#bankAssessBondId').append($(this).value)
   
       })
   
   }
   
   

   
   


2. 
   

   use jQuery to select the buttons and use the .on function to apply a click listener to all items returned

   
   
   

   var buttons = $(".btn.btn-success.bank");
   
   
   
   buttons.on("click", () => {
   
       //do stuff here
   
   });
   
   

   
   

I hope this helps!