add the new value from input field to a div while keeping the old input in previous div

Question

I want to be able to extract the value from the input field and add it to a created div and each time a new div is created it will take a new value while leaving the old values in place. Right now the new value overwrites all of the other values.

If you see my example; the plus sign adds a book to the shelf, then submitting the input field should add a title. However, after adding subsequent books the previous titles are overwritten.

I appreciate any help.

const shelf         = document.getElementById('shelf');
const addBookBtn    = document.getElementById('add-book');
const submitFormBtn = document.getElementById('submitform');

function addBook() {

  const book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);

}

addBookBtn.addEventListener('click', function() {
  addBook();
});

submitFormBtn.addEventListener('click', function(e) {
  e.preventDefault();
  var title = document.getElementById('booktitle').value;
  var book = document.querySelectorAll('.book')
  for (let b = 0; b < book.length; b++) {
    book[b].textContent = title;
  }

});

#shelf {
  height: 150px;
  border-bottom: 5px solid #000;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25px, 40px));
  align-items: end;
}

.book {
  border: 1px solid #000;
  height: 100px;
  width: 25px;
  display: inline-block;
}

<div id="bookshelf">

  <div id="shelf"></div>

</div>

<button id="add-book">+</button>

<form>

  <label for="booktitle">Book Title</label><br>
  <input type="text" id="booktitle" name="booktitle"><br>

  <input type="submit" id="submitform" value="Submit">

</form>

Answer 1

simply do this test

if ( book.textContent == '' )  // set value if empty
   book.textContent = myForm.booktitle.value; 

which is the same as Logical OR assignment (||=)

book.textContent ||= myForm.booktitle.value; 

const
  shelf      = document.getElementById('shelf')
, addBookBtn = document.getElementById('add-book')
, myForm     = document.getElementById('my-form')
, BooksElms  = []
  ;
addBookBtn.addEventListener('click', () => 
  {
  let book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);
  BooksElms.push(book);
  });
myForm.addEventListener('submit', e =>
  {
  e.preventDefault();
  BooksElms.forEach( book =>
    {
    book.textContent ||= myForm.booktitle.value; 
    });
  });

#shelf {
  height                : 150px;
  border-bottom         : 5px solid #000;
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(25px, 40px));
  align-items           : end;
  }
.book {
  border           : 1px solid #000;
  height           : 100px;
  width            : 25px;
  display          : inline-block;
  padding-top      : 5px;
  writing-mode     : vertical-rl;
  }

<div id="bookshelf">
  <div id="shelf"></div>
</div>

<button id="add-book">+</button>

<form  id="my-form">
  <label>Book Title</label>
  <br>
  <input type="text" name="booktitle">
  <br>

  <button>Submit</button>

</form>

Answer 2

Don't add the title to the divs in a loop. Use a global variable to hold the index of the book to add the title to. Every time you submit, you add the title to that book and increment the index.

const shelf         = document.getElementById('shelf');
const addBookBtn    = document.getElementById('add-book');
const submitFormBtn = document.getElementById('submitform');
let book_index = 0;

function addBook() {

  const book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);

}

addBookBtn.addEventListener('click', function() {
  addBook();
});

submitFormBtn.addEventListener('click', function(e) {
  e.preventDefault();
  var title = document.getElementById('booktitle').value;
  var book = document.querySelectorAll('.book')
  if (book_index < book.length) {
    book[book_index++].textContent = title;
  } else {
    alert("You need to add another book first");
  }
});

#shelf {
  height: 150px;
  border-bottom: 5px solid #000;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25px, 40px));
  align-items: end;
}

.book {
  border: 1px solid #000;
  height: 100px;
  width: 25px;
  display: inline-block;
}

<div id="bookshelf">

  <div id="shelf"></div>

</div>

<button id="add-book">+</button>

<form>

  <label for="booktitle">Book Title</label><br>
  <input type="text" id="booktitle" name="booktitle"><br>

  <input type="submit" id="submitform" value="Submit">

</form>