Bind bootstrap popover input value to the element who owns the popover

Question

I've a one column table and its TDs having a popover class. So in that TD when clicking on a button will ask for specifiying an input as shown below

As you can see the chart button trigger the popover for that TD and there are 2 inputs on the popover.

So my scenario is to append that Input values in the popover to get copied to the div where "No benchmark specified label". So how can I identify for which TD or for which parent the popover created or initiated. More clearly how to determine the creator of the Popover when I click on the save button.

CODE

$('.main-attributes').popover({
    html: true,
    container: 'body',
    placement: 'auto top',
    trigger: 'manual',
    title: function () {


        return $(this).find('.attribute-title').html() + " - Score Range"
    },
    content: function () {

        var H = $('#div_scoreselector');

        return $(H).html();
    }
})
$('.manage-range').on('click', function (e) { //.manage-range is the chart button as shown in image which opens the popup
    var ma = $(this).parents('.main-attributes');
    $('.main-attributes').not(ma).popover('hide');
    $(ma).popover('toggle');
    e.stopPropagation();
});

Score Selector DIV

<div class='hidden' id='div_scoreselector'>
    <div>
        <div class="row">
            <div class="col-md-12">
                <div class="row div-scorerange">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">
                                From</label>
                            <input placeholder="Low Score" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">
                                To</label>
                            <input placeholder="High Score" type="text" class="form-control" />
                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col-md-6 col-md-offset-6">
                        <button class="btn-dark-grey btn">
                            CANCEL</button>
                        <button class="btn btn-red">
                            SAVE</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Assuming you have multiple elements with the main-attributes class in the following generalized manner:

<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span>
    <button class="manage-range">Chart Button 1</button>
</div>
<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span>
    <button class="manage-range">Chart Button 2</button>
</div>
... etc.

Inside your .manage-range click-handler set a reference to $(this) (aka the button clicked at row X), and once the Bootstrap popover shown event is fired you can store the context as a data value on the Save button. BS Popover docs

$('.manage-range').on('click', function (e) {
    // ... your code here

    var $this = $(this);
    $('.main-attributes').off('shown.bs.popover').on('shown.bs.popover', function () {
        $('.popover button.save').data('context', $this);        
    });
    e.stopPropagation();
});

Outside of your .manage-range click-handler setup a on-click event for the save button like so:

// Assuming you have a .save class on the Save button
$(document).on('click', '.save', function () {
    var $context = $(this).data('context');
    var fromval = $('.popover #fromvalue').val();
    var toval = $('.popover #tovalue').val();
    // Now get the text container relative to the $context passed in
    $context.siblings('.text-container').text('From: ' + fromval + ' To: ' + toval);
});

Here is a rough fiddle: http://jsfiddle.net/9m8Yr/