Is there a way to add items from an array to each row in a container using jQuery?-CodePudding

I've been trying to add items from an array to rows within a container. Essentially, each row is supposed to contain a time text, input field, and a button. I'm pretty sure for loop is the way to go, but I'm getting each row repeated in the container. Where do you think I'm going wrong?

// array for time range
var timeArr = [
  "9 am",
  "10 am",
  "11 am",
  "12 pm",
  "1 pm",
  "2 pm",
  "3 pm",
  "4 pm",
  "5 pm",
];

// loop through time range array, creating hours, input fields, and text lock buttons
for (i = 0; i < timeArr.length; i  ) {
  var eachRow = $("<div>").addClass("row");
  $(".container").append(eachRow);
  var eachHour = $("<textarea>").text(timeArr[i]).addClass("hour col-md-2");
  var userInput = $("<input>")
    .attr("placeholder", "Add your notes here..")
    .addClass("time-block col-md-8");
  var textLock = $("<button>").text("lock/unlock").addClass("saveBtn col-md-2");
  $(".row").append(eachHour);
  $(".row").append(userInput);
  $(".row").append(textLock);
}

CodePudding user response：

You need to modify the last 3 lines. When using $(".row"), you are selecting all the elements with class "row". You just need the current row where you are iterating. Hence, using eachRow instead is a right way:

        var timeArr = [
        "9 am",
        "10 am",
        "11 am",
        "12 pm",
        "1 pm",
        "2 pm",
        "3 pm",
        "4 pm",
        "5 pm",
    ];

    // loop through time range array, creating hours, input fields, and text lock buttons
    for (i = 0; i < timeArr.length; i  ) {
        var eachRow = $("<div>").addClass("row");
        $(".container").append(eachRow);
        var eachHour = $("<textarea>").text(timeArr[i]).addClass("hour col-md-2");
        var userInput = $("<input>")
        .attr("placeholder", "Add your notes here..")
        .addClass("time-block col-md-8");
        var textLock = $("<button>").text("lock/unlock").addClass("saveBtn col-md-2");
        eachRow.append(eachHour);
        eachRow.append(userInput);
        eachRow.append(textLock);
    }

Demo: https://jsfiddle.net/lotusgodkk/co8r4hks/3/

        var timeArr = [
          "9 am",
          "10 am",
          "11 am",
          "12 pm",
          "1 pm",
          "2 pm",
          "3 pm",
          "4 pm",
          "5 pm",
        ];

        // loop through time range array, creating hours, input fields, and text lock buttons
        for (i = 0; i < timeArr.length; i  ) {
          var eachRow = $("<div>").addClass("row");
          $(".container").append(eachRow);
          var eachHour = $("<textarea>").text(timeArr[i]).addClass("hour col-md-2");
          var userInput = $("<input>")
            .attr("placeholder", "Add your notes here..")
            .addClass("time-block col-md-8");
          var textLock = $("<button>").text("lock/unlock").addClass("saveBtn col-md-2");
          eachRow.append(eachHour);
          eachRow.append(userInput);
          eachRow.append(textLock);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

</div>