javascript - Display the value from a input box inside popover under the DOM element which creates the dialog -

i'm newbie , learning self , started working on projects. i'm working on drag , drop task i'm using jquery ui make clone dragged element. that's working fine.

but have requirement create popover box contain form inside of it. want display value entered in popover dialog box under corresponding clone element creating popover box. please check code below.

var $clone, cloneid;  var wardinfo;  var counter = 1;  $(document).ready(function($) {      $(".drop-zone").droppable({      accept: '.drag',      drop: function(event, ui) {        $clone = ui.helper.clone();        $clone.attr({          'data-toggle': 'popover',          'data-placement': 'bottom',          'data-dismiss': 'close',          'data-original-title': 'add title dialog'        });        if (!$clone.is('.inside-drop-zone')) {          $(this).append($clone.addclass('inside-drop-zone').draggable({            containment: '.drop-zone',            zindex: '999'          }));            $clone.resizable({            helper: "ui-resizable-helper",            handles: 'ne, se, sw, nw, n, s, w, e',            aspectradio: true          });        }        cloneid = $clone.attr("id", "clonedelement" + counter);          wardinfo = '<div class="form-group "><div class="col-md-12 col-lg-12 col-sm-12 col-center"><label class="control-label input"><input type="text" class="form-control" name="addvalue" placeholder="enter value" id="addvalue"/></label></div><div class="col-md-12 col-lg-12 col-sm-12 col-center"><button id="btntest" class="btn btn-primary btn-sm assignedgroup" type="button" data-target-id="addvalue">add</button></div></div>';        console.log(wardinfo);          $("#clonedelement" + counter).popover({          html: true,          content: wardinfo        });          $(document).on('click', '#btntest', function() {          var resdataval;          var contentvalue = $('#addvalue').val();          alert('contenet value: ' + contentvalue);            if (!contentvalue == "" || !contentvalue == undefined || !contentvalue == null) {            var dataval = $clone.attr('data-contentvalue', contentvalue);            //$("#clonedelement1").popover('hide');            var respara = $('<p id="elval"></p>').insertafter(this).append(contentvalue);            $(respara).append(contentvalue);              $("#clonedelement" + counter).popover('hide');            resdataval = $clone.data('contentvalue');            console.log(resdataval);          } else {            alert("pls enter data..");          }        });        ++counter;      }    });    $(".drag").draggable({      helper: 'clone'    });  });

.draglayout {    position: relative;    width: 100%;    height: 100%;    padding: 10px;  }  .drop-zone {    border: 1px solid #9c9898;    height: 350px;    width: 400px;    margin: 0 auto;  }  .clear {    clear: both;  }  .drag {    background-color: green;    width: 100px;    height: 100px;    margin-left: 10px;  }  .left {    float: left;    width: 30%;    height: 100%;  }  .right {    float: right;    width: 70%;    height: 100%;  }  #dialog {    position: element(#target);    padding-top: 20px;    overflow: hidden;  }  .ui-dialog .ui-dialog-titlebar {    background: #3a9893;  }  .ui-dialog .ui-dialog-buttonpane {    margin: 0;    padding: 0;    position: absolute;    top: 50px;    right: 10px;  }  .ui-dialog .ui-widget .ui-widget-content {    padding: 0;  }  .ui-dialog .ui-dialog-buttonpane {    border: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>  <div class="draglayout">    <div class="left">      <div class="drag"></div>      <br />      <div class="drag"></div>      <br />      <div class="drag"></div>    </div>      <div class="right">      <div class="drop-zone"></div>    </div>  </div>    <div id="adddialog"></div>

please me fix issue.