Popover - Copy Inputs on Submit/Save to owner elements

by bizamajig

HTML

<script src="http://code.jquery.com/jquery-git1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class='hidden' id='form_container'>
    <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 id="fromvalue" 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 id="tovalue" 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">SAVE</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="main-attributes" data-toggle="popover"
						data-toggle="popover"
						data-original-title=""
						data-content="Content"
						title="Counter:"
> 
    <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>
<div class="main-attributes">
    <span class="text-container">No Benchmarks Specified</span>
   ...

JavaScript

//$( '.main-attributes' ).popover({
$( '[data-toggle]' ).popover({
    html: true,
//    container: 'body',
    placement: 'auto top',
    trigger: 'manual',
    title: function () {
        return $(this).find( '.attribute-title' ).html() + " - Score Range"
    },
    content: function () {
        alert( 'HTML: ' + $(this).html() );
        $(this).data( 'context', '12345' );
        var $h = $( '#form_container' );
        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' );
    var $this = $(this);
    $( '.main-attributes' ).off( 'shown.bs.popover' ).on( 'shown.bs.popover', function () {
//
//      MARK THE CONTEXT, WHICH POPUP GOES WITH WHICH PARENT ELEMENT?
//
//alert( $( '.popover .save' ) );
//        console.log( 'HERE' );
        $( '.popover .save' ).data( 'context', $this );
    });
    e.stopPropagation();
});

$(document).on( 'click', '.save', function () {
alert( $context );
    var $context = $(this).data( 'context' );
    var fromval = $( '.popover #fromvalue' ).val();
    var toval = $( '.popover #tovalue' ).val();
    $context.siblings( '.text-container' ).text( 'From: ' + fromval + ' To: ' + toval );
//
//  OPTIONALLY, we will hide our popover, or not, depending on what we like at the time!?!
//
    $context.parent().popover( 'hide' );
});
*/