JavaScript Get the closest element and input a value to the input

Question

I have a piece of HTML that looks like this

<div id="imageContent">
  <div class="row">
    <div class="col-md-5 col-md-offset-1">
      <div class="input-group form-group">
      <input type="text" class="form-control file-src" id="file1"  placeholder="File Thumb Source">
      <span class="input-group-btn">
        <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
      </span>
      </div>
    </div>
    <div class="col-md-5">
        <div class="form-group">
            <input class="form-control" type="text" placeholder="http://postbackurl.com"/>
        </div>
    </div>
  </div>
</div>

Above that I have a button that looks like this

<div class="row text-center">
  <div class="col-md-12">
    <button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
  </div>
</div>

Once that button is pressed I run a function to get the #imageContent div and append a new row with the same as before.

<script type="text/javascript">
  function add_fields() {
   var div = document.getElementById("imageContent");
   div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}

</script>

This works as expected and adds a new row into the imageContent div.

See picture. If I click Select Image, it launches a modal window with all of my images, and when I select one, it runs this piece of js.

onInsertCallback: function (obj){
              /** Populate the src **/
              currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);              
              $('#myModal').hide();
            }

The problem I am having is that it does not get the correct input area to insert the value into, and instead always updates the first element. The full js code looks like this.

$(document).ready(function() {
  jQuery(document).ready(function() {

    /** Keep track of which modal button was clicked. **/
    var currentModalBtn;
    jQuery('.modal-btn').click(function() {
      currentModalBtn = jQuery(this);
    });

    jQuery('.laradrop').laradrop({
      onInsertCallback: function(obj) {
        /** Populate the src **/
        currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
        $('#myModal').hide();
      },
      onErrorCallback: function(jqXHR, textStatus, errorThrown) {
        // if you need an error status indicator, implement here
        //Swal here 
        swal({
          title: 'Error!',
          text: 'An Error Occurred',
          type: 'error',
          showConfirmButton: false,
          showCancelButton: true
        });
      },
      onSuccessCallback: function(serverData) {
        //
      }
    });
  });
});

My question is, how can I ensure that I get the right input field that the button was clicked on to update that fields value and make sure the others stay as they were.

Answer 1

move var currentModalBtn; outside the ready so it is available to the callback(s)

Also have only one

$(document).ready(function() {
  jQuery(document).ready(function() {

you have a mess of jQuery/$ and so on - this will likely work better:

 function add_fields() { var $div = $("#imageContent"); $div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>'); } var currentModalBtn; $(function() { /** Keep track of which modal button was clicked. **/ $("#imageContent").on("click",".modal-btn", function() { currentModalBtn = $(this); }); $("#test").on("click",function() { currentModalBtn.closest('.input-group').find('input.file-src').val("hello"); $('#myModal').hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="row text-center"> <div class="col-md-12"> <button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button> </div> </div> <div id="imageContent"> <div class="row"> <div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"> <input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"> <span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div> </div> <button type="button" id="test"> click </button>