Create a dynamic div and display if it doesn't exists already in the display list

Create a dynamic div and display if it doesn't exists already in the display list

I'm working on an application wherein the data will be displayed here based on some selection.

Please note that, the data in the table actually comes in through some JSON.

However, here I've hard coded all the data here in the table. Unfortunately, I don't have the JSON to share.

  1.     <!doctype html>
  2.     
  3.     <html>
  4.      <head>
  5.      <style>
  6.      table, th, td {
  7.      border: 1px solid #ddd;
  8.      border-collapse: collapse;
  9.      padding: 10px;
  10.      }
  11.     
  12.      .parent {
  13.                     height: 25%;
  14.                     width: 90%;
  15.                     padding: 1%;
  16.                     margin-left: 1%;
  17.                     margin-top: 1%;
  18.                     border: 1px solid black;
  19.     
  20.                 }
  21.     
  22.                 .parent:nth-child(odd){
  23.                     background: skyblue;
  24.                 }
  25.     
  26.                 .parent:nth-child(even){
  27.                     background: green;
  28.                 }
  29.     
  30.             </style>
  31.      </head>
  32.      <body>
  33.      <table>
  34.      <tr>
  35.      <th>Select</th>
  36.      <th>Name</th>
  37.      <th>Website</th>
  38.      </tr>
  39.      <tr>
  40.      <td><input type="checkbox" name="selectRow"></td>
  41.      <td class="name">A</td>
  42.      <td class="weburl"><a href="abc.com">ABC</a></td>
  43.      </tr>
  44.      <tr>
  45.      <td><input type="checkbox" name="selectRow"></td>
  46.      <td class="name">D</td>
  47.      <td class="weburl"><a href="def.com">DEF</a></td>
  48.      </tr>
  49.      <tr>
  50.      <td><input type="checkbox" name="selectRow"></td>
  51.      <td class="name">G</td>
  52.      <td class="weburl"><a href="ghi.com">GHI</a></td>
  53.      </tr>
  54.      <tr>
  55.      <td><input type="checkbox" name="selectRow"></td>
  56.      <td class="name">J</td>
  57.      <td class="weburl"><a href="jkl.com">JKL</a></td>
  58.      </tr>
  59.      </table>
  60.     
  61.      <button onclick="saveData()">Save</button>
  62.     
  63.      <br />
  64.     
  65.      <div class="container">
  66.     
  67.      </div>
  68.     
  69.      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  70.      <script>
  71.     
  72.     
  73.      var content = "";
  74.      function saveData(){
  75.     
  76.     
  77.      $('input[name="selectRow"]:checked').map(function(count) {
  78.      var myJSON =  JSON.parse(decodeURIComponent(this.value));
  79.      var tableDataUrl = myJSON.weburl;
  80.                  content += '<div class="parent"><label class="dataLabel">Name:</label>'+myJSON.name+'<label class="dataLabel">Website:</label><a href="'+myJSON.weburl+'" class="dispWebUrl"></div>';
  81.      var dispUrl = $('.container').find('.dispWebUrl').attr('href');
  82.     
  83.      if(tableDataUrl === dispUrl)
  84.                     $('.container').html(articlesResult);
  85.      } else {
  86.                       alert("Data already exists!");
  87.                    }  
  88.                
  89.             }
  90.     
  91.      </script>
  92.      </body>
  93.     </html>
  94.     

So, now I select a row using the checkbox from the table, and click on the 'Save' button which would then append the data to a static div with class="container". 

However, if a particular div with the same weburl (as shown in the code) already exists inside the display "div.container", it shouldn't add that. 

1. Select A & D from the table shown in the screenshot and click on 'Save'.

2. A & D get appended to "div.container".

3. Now, select A,D,G,J from the table. 

Current situation: Nothing is added, and alert is shown as "Data already exists!" 

Ideal behaviour: G & J should get appended to "div.box" and alert should be shown as "A already exists!".

How do I achieve this?

Note: URL(weburl) is going to be unique here. Hence, taking that for comparison.