Create and append dynamic div if the div with same value doesn't exists

Create and append dynamic div if the div with same value doesn't exists

 I'm working on some application wherin the data will be displayed based on some selection. The data will be selected from the table as shown in the screenshot.
It gets populated in the table through some JSON.

Now, lets say, for example,

  1. Select A & C from the table shown in the screenshot and click on 'Save'.
  2. A & C get appended to "div.box" with ids "parent-0" and "parent-1" respectively.
  3. Now, select A & B from the table.

Current situation: Nothing is added, and alert is shown as "Data already exists!"
Ideal behaviour: B should get appended to "div.box" with id "parent-2" and alert should be shown as "A already exists!". 

  1. function showData(){  var count = 0; $('input[name="selectData"]:checked').map(function() { var JSONData = JSON.parse(decodeURIComponent(this.value)); content += '<div class="container parent" id="parent-'+count'"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+JSONData.name+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>'; count++; }); if($('#parent-'+count).length==0) { $('.box').html(content); resetEvents(); }else{ alert("Data already exists!"); } }


 How do I achieve this?