adding multiple inputfield using javascript in php not working

Question

i have a form in php in which i am trying to add multiple fields on button click, i did the following code:

    function add_fields() {
        
        var objTo = document.getElementById('room_fileds')
        var divtest = document.createElement("div");
        divtest.innerHTML = '

        <div class="form-group col-md-6">
          <label for="inputPassword4">Item</label>
          <?php

          $sqlcodes = "SELECT * FROM inventory ORDER BY categoryname ASC";
            $resultcodes = mysqli_query($con, $sqlcodes);
          echo "<td><select class='form-control' name='item'>";
          echo "<option>Select Item</option>";
          if ($resultcodes->num_rows > 0) {
          while($row = $resultcodes->fetch_assoc()) {
               $group[$row['categoryname']][] = $row;
          }
           foreach ($group as $key => $values){
               echo '<optgroup label="'.$key.'">';
               foreach ($values as $value)
               {
                   echo '<option value="'.$value['name'].'">'.$value['name'].'</option>';
               }
               echo '</optgroup>';
           }
          } else {}
          echo "</select></td>";
           ?>
        </div>
        <div class="form-group col-md-6">
          <label for="inputEmail4">Weight</label>
          <input name="weight" type="text" class="form-control" id="inputEmail4" placeholder="Weight">
        </div>

        ';

        objTo.appendChild(divtest)
    }

<div id="room_fileds">
  <div class="form-group col-md-6">
    <label for="inputPassword4">Item</label>
    <?php

    $sqlcodes = "SELECT * FROM inventory ORDER BY categoryname ASC";
      $resultcodes = mysqli_query($con, $sqlcodes);
    echo "<td><select class='form-control' name='item'>";
    echo "<option>Select Item</option>";
    if ($resultcodes->num_rows > 0) {
    while($row = $resultcodes->fetch_assoc()) {
         $group[$row['categoryname']][] = $row;
    }
     foreach ($group as $key => $values){
         echo '<optgroup label="'.$key.'">';
         foreach ($values as $value)
         {
             echo '<option value="'.$value['name'].'">'.$value['name'].'</option>';
         }
         echo '</optgroup>';
     }
    } else {}
    echo "</select></td>";
     ?>
  </div>
  <div class="form-group col-md-6">
    <label for="inputEmail4">Weight</label>
    <input name="weight" type="text" class="form-control" id="inputEmail4" placeholder="Weight">
  </div>
</div>
<input type="button" id="more_fields" onclick="add_fields()" value="Add More" />

however this is not working, i am getting the following error:

** Uncaught ReferenceError: add_fields is not defined at HTMLInputElement.onclick **

can anyone please tell me what is wrong in here, thanks in advance

Answer 1

As per the comment previously about cloning content and appending that the following goes a step further and uses a content Template to store the content that you wish to add with each button click. This template could hold the generated select menu and would be invisible until added to the DOM. This means you do not have a huge, bloated function that gets called - only some quite simple code to find the template, create a clone and append to the designated parent node.

The below example has the PHP commented out so that the display here looks OK but would need the PHP code re-enabled to produce the actual results you need. None of the code within the template has an ID attribute so there is no need to worry about duplicating IDs.

const clonetemplate=(e)=>{
  let parent=document.getElementById('room_fields');
  let tmpl=document.querySelector('template#rfc').content.cloneNode( true );
  
  parent.append( tmpl )
}

// Button click handler
document.querySelector('input#add').addEventListener('click',clonetemplate );

// pageload... display initial menu
clonetemplate();

#room_fields > div{margin:1rem;padding:1rem;border:1px solid grey;font-family:monospace;}
#room_fields > div label{display:block;width:80%;padding:0.25rem;margin:0.1rem auto;float:none;}
#room_fields > div select,
#room_fields > div input{float:right}

<div id="room_fields">
  <!-- add content here -->
</div>
<input type="button" id='add' value="Add More" />





<!--

  Generate the content once that will be repeated
  and keep it within a content template until
  needed.
-->
<template id='rfc'>
    <div>
        <div class='form-group col-md-6'>
            <label>Item
                <select class='form-control' name='item'>
                    <option>Select Item
          <!-- Uncomment this PHP for live version
                    <?php
            
            $sql = 'select * from `inventory` order by `categoryname` asc';
            $res = $con->query( $sql );
            
            $group=array();
            while( $rs=$res->fetch_object() ){
              $group[ $rs->categoryname ]=$rs;
            }


            foreach( $group as $key => $values ){
              printf('<optgroup label="%s">',$key);
              foreach( $values as $obj )printf( '<option>%s',$obj->name );
              print('</optgroup>');
            }
            
                    ?>
          -->
          <option>Hello
          <option>World
          <option>No IDs
          <option>Simples...
                </select>
            </label>
        </div>
        <div class='form-group col-md-6'>
            <label>Weight
                <input name='weight' type='text' class='form-control' placeholder='Weight' />
            </label>
        </div>
    </div>
</template>

Answer 2

In the string that you define in the function add_fields and assign to divtest.innerHTML you have line breaks. You probably also get an error when loading the script saying that you have a syntax error. You should try to avoid line breaks in strings. An alternative solution could be to use backticks for your string. YOu can read about it here: Template literals (Template strings).

Here are two examples. The first fails with both syntax and reference error, the next works fine (but does not do anything).

function add_fields(){
  var divtest = document.createElement("div");
  divtest.innerHTML = '
  test
  ';
}

<input type="button" id="more_fields1" onclick="add_fields()" value="Add More" />

function add_fields(){
  var divtest = document.createElement("div");
  divtest.innerHTML = `
  test
  `;
}

<input type="button" id="more_fields1" onclick="add_fields()" value="Add More" />