Click corresponding button on input change

Created to demonstrate solution given at https://stackoverflow.com/a/55837149/1369473

by Sree K

HTML

<!-- P.S: I changed data-panel="infopanel" to data-panel="basicinfopanel" to make it consistent with other divs -->
<div class="ap-create-story-panel-wrap" data-panel="basicinfopanel">
  <input type="text">
</div>
<a class="btn-basicinfopanel" data-target="certificatepanel">Save/Next</a>

<div class="ap-create-story-panel-wrap" data-panel="certifypanel">
  <input type="text">
</div>
<a class="btn-certifypanel" data-target="certifypanel">Save/Next</a>

<div class="ap-create-story-panel-wrap" data-panel="photopanel">
  <input type="text">
</div>
<a class="btn-photopanel" data-target="photopanel">Save/Next</a>

JavaScript

$(document).ready(function() {
    // Record original value of each input. We will use it to compare with actual value later
    $('div.ap-create-story-panel-wrap input').each(function() {
        $(this).data('old', $(this).val());
    });

    // Listen to mouse click anywhere except input
    $(document).not('div.ap-create-story-panel-wrap, input').mouseup(function(e) {
        // Check which input value changed
        $('div.ap-create-story-panel-wrap input').each(function() {
            let ov = $(this).data('old');
            let nv = $(this).val();
            if(nv != ov) {
                // Trigger click on its btn
                let tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
                let bCls = '.btn-'+tgt;   // btn class
                $(bCls).trigger('click');

                // Update data-old to new value to prepare for any further change detection
                $(this).data('old', $(this).val());
            }
        });
    });

    // Added only for demo, not needed in actual code
    $('a').on('click', function() {
        alert($(this).data('target'));
    });
});