Use variable inside a string in Javascript

Question

I am trying to add some DOM when click in a button. But i want to add the name attribute dynamically. Here is my code

$(document).ready(function() {
 console.log("done");
 var counterEdu = 1;
 $("#add-edu").click(function (event) {
 event.preventDefault();
 counterEdu = counterEdu+1; 
 $("#passing-year").after('<div class="col-md-12 form-group1">'+'<input type="text" placeholder="Degree Name" name="degree"+counterEdu;>'
 });
 });

I want to add the name attribute concatenated with

counterEdu

variable. like degree1,degree2..... so how to do that?

Answer 1

You need to escape it properly:

$("#passing-year").after('<div class="col-md-12 form-group1">' + '<input type="text" placeholder="Degree Name" name="degree'+counterEdu +'">'

• Mutasim Fuad: Thanks that helped. :)
• Ionut Necula: @MutasimFuad, you're welcome. I'm glad it worked. Please don't forget to accept the answer if it helped. Thanks.

Answer 2

Since counterEdu is not a string

$(document).ready(function() {
 console.log("done");
 var counterEdu = 1;
 $("#add-edu").click(function (event) {
 event.preventDefault();
 counterEdu = counterEdu+1; 
 $("#passing-year").after('<div class="col-md-12 form-group1">'+'<input type="text" placeholder="Degree Name" name="degree'+counterEdu+'">'
 });
 });

• Ionut Necula: This is not ok. Hint: name attribute is closing earlier.