get checkbox values from popup and display in unordered list on parent page

I am using Colorbox Jquery popup for opening a form which is having multiple chekboxes and submit button.

HTML code:

  <div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>

    <div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text"></div>

 <!-- This contains the hidden content for inline calls (POPUP code)-->
    <div style='display:none'>
        <div id='inline_content' style='padding:15px; background:#fff; font-size: 17px;'>
        <form action="" id="popup_form">
                    <input type="checkbox" name="race" value="American Indian or Alaska Native"> American Indian or Alaska Native<br>
                    <input type="checkbox" name="race" value="Asian"> Asian<br> 
                    <input type="checkbox" name="race" value="Black or African American"> Black or African American<br> 
                    <input type="checkbox" name="race" value="Native Hawaiian or Other Pacific Islander"> Native Hawaiian or Other Pacific Islander<br> 
                    <input type="checkbox" name="race" value="White"> White<br> 
                    <input type="submit" name="submit" class="submitbtn" value="Add">
           </form>

       </div>
    </div>

If user clicks on +Add/Edit link then popup will open. Then the selected values of checkboxes will display on parent page after submit click. To display values of checkboxes on parent page I have used following script.

Script:

<script>
  $(document).ready(function(){
        $('#popup_form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                          $("#text").text($("#text").text() + $(this).val()+ " ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });             
    });
</script>

Now what is happening,

1) if I checked e.g. first two checkboxes that values are displaying like this : American Indian or Alaska Native ,Asian , . If again I open popup to select 3rd checkbox then popup shows first two values checked with result like American Indian or Alaska Native ,Asian ,American Indian or Alaska Native ,Asian ,Black or African American , where I just want to display American Indian or Alaska Native ,Asian ,Black or African American ,

why the result is getting repeated?

2) How I can show the result in un-ordered list on parent page?