when click on button it clones data into iframe multiple times?

[wolfgang1983]

I have a small problem when I clone my editable div into my iframe. Each time I click on my code view button it copys the content from my editable div and then displays it in my iframe But each time I do that it copys the same content multiple times.

The way my code view button works is if I click on code_view button it should display same code as typed it editable div but then when I click on code_view second time it goes back to editable div.

How can I stop the code_view button copying contents of editable div multiple times but only show current code in iframe.

Codepen VIew

Script

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
function wrap(tag) {

    var sel, range;

    if (window.getSelection) {
        sel = window.getSelection();

        if (sel.rangeCount) {

            range = sel.getRangeAt(0);
            selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('<' + tag + '>' + selectedText + '</' + tag + '>'));
            $('button[id="instant_preview"]').trigger('click');
        }

    } else if (document.selection && document.selection.createRange) {

        range = document.selection.createRange();
        selectedText = document.selection.createRange().text + "";
        range.text = '<' + tag + '>' + selectedText + '</' + tag + '>';

        $('button[id="instant_preview"]').trigger('click');
    }
}
$(document).ready(function(){
    jQuery('button[id="code_view"]').click(function(){
        if(jQuery('iframe').hasClass('hide')) {
            jQuery('#editable').addClass('hide');
            jQuery('iframe').removeClass('hide');
        } else {
            jQuery('#editable').removeClass('hide');
            jQuery('iframe').addClass('hide');
        }
    });            
});

$('#hr').on('click', function() {});

$('button[id="instant_preview"]').on('click', function() {
    var code = $('#editable').text();
    $('#preview').html(code);
});

// Todo set limit 1 clone only

$('button[id="code_view"]').on('click', function() {
    var code = $('#editable').html();
    $('#iframe').contents().find('body').append(code);
});

$('#editable').keyup(function(){
    $('button[id="instant_preview"]').trigger('click');
});

$('#editable').each(function(){
    this.contentEditable = true;
});

$(function(){
   $("#bold").tooltip();
   $("#italic").tooltip();
   $("#hr").tooltip();
   $("#hyperlink").tooltip();
   $("#strike").tooltip();
   $("#pre").tooltip();
   $("#code_view").tooltip();
   $("#instant_preview").tooltip();
});
</script>

Html

<form id="form-forum" class="form-horizontal">
<div class="container">

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
        <div class="form-group">
            <label for="forum-title" class="col-sm-2">Title</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" name="title" id="forum-title" placeholder="Title" />
            </div>
        </div>
    </div>
</div>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="clearfix">
            <div class="pull-left">
                <button type="button" id="bold" onclick="wrap('b');" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Bold <b>"><i class="fa fa-bold"></i></button>
                <button type="button" id="italic" onclick="wrap('i');" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Ilatic <i>"><i class="fa fa-italic"></i></button>
                <button type="button" id="pre" onclick="wrap('pre');" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Code Sample <pre>">{}</button>
                <button type="button" id="hr" class="btn btn-default" data-placement="top" title="Still Working On Script">hr</button>
                <button type="button" id="hyperlink" class="btn btn-default" data-placement="top" title="Still Working On Script" disabled="disabled"><i class="fa fa-link icon-link"></i></button>
                <button type="button" id="strike" onclick="wrap('strike');" class="btn btn-default" data-placement="top" title="Strikethrough"><i class="fa fa-strikethrough icon-strikethrough"></i></button>
                <button type="button" id="code_view" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Code View"><i class="fa fa-code icon-code"></i></button>
                <button type="button" id="instant_preview" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Instant Preview" disabled="disabled"><i class="fa fa-television"></i></button>

            </div>
            <div class="pull-right">
            </div>
        </div> 
    </div>
    <div class="panel-body">
        <div class="form-group">
            <div class="col-sm-12">
                <div id="editable" class="form-control"></div>
                <iframe src="about:blank" class="hide form-control" id="iframe">Iframe</iframe>
            </div>
        </div>
    </div><!-- .panel-body -->
    <div class="panel-footer">
        <div class="clearfix">
        <div class="pull-left">
        </div>
        <div class="pull-right">
            <button type="submit" class="btn btn-primary">Post Your Question</button>
        </div>
        </div>
    </div>
</div><!-- .panel -->
</div>
</div>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
        <div id="preview"></div>
    </div>   
</div>

</div><!-- .container -->
</form>