Data Being Added Twice On Selecting From Table Using Checkbox

I'm not sure what's wrong with the loop here. When I select the data(generated using JSON) from a table using checkbox, the selected data is added multiple times. What's wrong with

Solution 1:

I think you need to use html rather than append. since append will every time add the checked data along with the current, which already has the one you previously selected

$('input[name="articles"]:checked').each(function() {
    var articleJson =  JSON.parse(decodeURIComponent(this.value));
    articlesResult +='<divclass="container article-box parent><div class="rowarticle-row"><divclass="col-md-7 article data-col"><divclass="row"><formclass="form-horizontal form-custom"><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">News Title:</label><divclass="col-md-8 article-data"><ahref="#">'+articleJson.newsTitle+'</a></div></div><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">Published On:</label><divclass="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">Job Function:</label><divclass="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">Tags:</label><divclass="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><divclass="col-md-3 article img-col"><imgsrc="'+articleJson.newsBannerImage+'"class="img-thumbnail img-responsive img-icon"style="max-width: 280px; max-height: 120px;"></div><divclass="col-md-2 article btn-col"><divclass="row del-btn"><buttonclass="btn btn-danger btn-sm removeArticle"><spanclass="glyphicon glyphicon-remove"></span></button></div><divclass="row updown-btn"><divclass="btn-group"><buttonclass="btn btn-primary btn-xs top-btn"><spanclass="glyphicon glyphicon-arrow-up"></span></button><buttonclass="btn btn-primary btn-xs down-btn"><spanclass="glyphicon glyphicon-arrow-down"></span></button></div><divclass="btn-group leftright-btn"><buttonclass="btn btn-primary btn-xs left-btn"><spanclass="glyphicon glyphicon-arrow-left"></span></button><buttonclass="btn btn-primary btn-xs right-btn"><spanclass="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'
});
$('.box').html(articlesResult);

Solution 2:

Try this, you are adding the same set of templates over and over again to the same variable and appending it to DOM. You only have to call append once after the loop.

$('input[name="articles"]:checked').each(function() {
var articleJson =  JSON.parse(decodeURIComponent(this.value));
articlesResult +='<divclass="container article-box parent><div class="rowarticle-row"><divclass="col-md-7 article data-col"><divclass="row"><formclass="form-horizontal form-custom"><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">News Title:</label><divclass="col-md-8 article-data"><ahref="#">'+articleJson.newsTitle+'</a></div></div><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">Published On:</label><divclass="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">Job Function:</label><divclass="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><divclass="form-group form-custom"><labelclass="control-label col-md-4 article-label">Tags:</label><divclass="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><divclass="col-md-3 article img-col"><imgsrc="'+articleJson.newsBannerImage+'"class="img-thumbnail img-responsive img-icon"style="max-width: 280px; max-height: 120px;"></div><divclass="col-md-2 article btn-col"><divclass="row del-btn"><buttonclass="btn btn-danger btn-sm removeArticle"><spanclass="glyphicon glyphicon-remove"></span></button></div><divclass="row updown-btn"><divclass="btn-group"><buttonclass="btn btn-primary btn-xs top-btn"><spanclass="glyphicon glyphicon-arrow-up"></span></button><buttonclass="btn btn-primary btn-xs down-btn"><spanclass="glyphicon glyphicon-arrow-down"></span></button></div><divclass="btn-group leftright-btn"><buttonclass="btn btn-primary btn-xs left-btn"><spanclass="glyphicon glyphicon-arrow-left"></span></button><buttonclass="btn btn-primary btn-xs right-btn"><spanclass="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'  
});
$('.box').append(articlesResult);