can't add new line after tag input type file in javascript

Question

please tell me how to add br tag or new line between input tag with file type. my html

<input type="button" class="btn btn-outline-success form-control mr-sm-2" style="margin-left: 90%;" id="addPicture" value="Add Picture" onclick="addPicture();"/>
<table id="table_target">
    <tbody id="body"> 
    <tr>
        <td>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="collapse navbar-collapse" id="browser-first" >
                    
                </div>
            </nav>
        </td>
    </tr>
    </tbody>
</table>

my js

var i = 1;

function addPicture() {
    var img = $('<img />', {
            id: 'img' + i,
            src: '\assets/img/Rod.png',
            width: 300
        })
        .appendTo($('#table_target'));

    var input = $('<input />', {
            id: 'browser-first' + i,
            type: 'file',
            onclick: 'in_first(this)'
        })
        .appendTo($('#browser-first'));

    let imgPreview = document.getElementById("img" + i);
    imgPreview.style.margin = '5px';
    let inputBtn = document.getElementById("browser-first" + i);
    inputBtn.style.marginright = '40px';

    if (i % 3 == 0) {
        > //i want to add a new line here
        // $( "<br />" ).insertAfter( "#browser-first"+i );
        // $('#browser-first').val($('#browser-first').val() + '\n\r')
    }

    i++;
}

I have tried various codes but have not succeeded.

i want the 4th, 7th, etc. input tags to be on a new line

Answer 1

To achieve the desired layout, where every 4th, 7th, etc., input tags appear on a new line, you can insert a
tag after every third input tag. This can be done by modifying the JavaScript function addPicture() you provided.

Here's the adjusted addPicture() function:

function addPicture() {
    var img = $('<img />', {
        id: 'img' + i,
        src: '\assets/img/Rod.png',
        width: 300
    }).appendTo($('#table_target'));

    var input = $('<input />', {
        id: 'browser-first' + i,
        type: 'file',
        onclick: 'in_first(this)'
    }).appendTo($('#browser-first'));

    let imgPreview = document.getElementById("img" + i);
    imgPreview.style.margin = '5px';

    let inputBtn = document.getElementById("browser-first" + i);
    inputBtn.style.marginright = '40px';

    if (i % 3 == 0) {
        $('<br />').insertAfter("#browser-first" + i);
    }

    i++;
}

In this updated function, when i is a multiple of 3 (meaning after every third input tag), a
tag is inserted after the current input tag. This ensures that the 4th, 7th, etc., input tags will start on a new line.

Remember, the
tag is inserted after the input element. Hence, you need to make sure that the IDs ("browser-first" + i) you're using to insert the
tag after are correct and pointing to the input elements you're adding dynamically. If there are any discrepancies in the IDs or if the elements are nested within other elements, you might need to adjust the selector used in insertAfter().

Answer 2

You can do

$("#browser-first").append("<br><hr><br>");

If you dislike this, you can have a <br> only.

var i = 1;

function addPicture() {
    var img = $('<img />', {
            id: 'img' + i,
            src: '\assets/img/Rod.png',
            width: 300
        })
        .appendTo($('#table_target'));

    var input = $('<input />', {
            id: 'browser-first' + i,
            type: 'file',
            onclick: 'in_first(this)'
        })
        .appendTo($('#browser-first'));

    let imgPreview = document.getElementById("img" + i);
    imgPreview.style.margin = '5px';
    let inputBtn = document.getElementById("browser-first" + i);
    inputBtn.style.marginright = '40px';

    if (i % 3 == 0) {
        $("#browser-first").append("<br><hr><br>");
    }

    i++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="button" class="btn btn-outline-success form-control mr-sm-2" style="margin-left: 90%;" id="addPicture" value="Add Picture" onclick="addPicture();"/>
<table id="table_target">
    <tbody id="body"> 
    <tr>
        <td>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="collapse navbar-collapse" id="browser-first" >
                    
                </div>
            </nav>
        </td>
    </tr>
    </tbody>
</table>

Answer 3

There is no reason to add extra markup. Here is an example of how you can use CSS Grid Layout to arrange the input elements.

The colors are just to show what inputs are where.

form {
  display: inline-grid;
  grid-template-columns: auto auto auto;
}

input:nth-child(3n-2) {
  grid-column-start: 1;
  background-color: red;
}

input:nth-child(3n-1) {
  grid-column-start: 2;
   background-color: green;
}

input:nth-child(3n) {
  grid-column-start: 3;
  background-color: blue;
}

<form>
  <input type="file" name="file1">
  <input type="file" name="file2">
  <input type="file" name="file3">
  <input type="file" name="file4">
  <input type="file" name="file5">
  <input type="file" name="file6">
  <input type="file" name="file7">
  <input type="file" name="file8">
  <input type="file" name="file9">
  <input type="file" name="file10">
</form>

Answer 4

Thank you all for your help, I have found the solution by making a few changes. it may not be efficient but it works for me. my html

<tr>
    <td>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="browser-first1"></div>
        </nav>
    </td>
</tr>

my js

var i = 1;
var j = 1;

function addPicture() {      
    var img = $('<img />',
         { id: 'img'+i,
           src: '\assets/img/Rod.png', 
           width: 300
         })
          .appendTo($('#table_target'));
    
    var input = $('<input />',
         { id: 'browser-first'+i,
           type: 'file',
           onclick: 'in_first(this)'
         })
          .appendTo($('#browser-first'+j));
    
    let imgPreview = document.getElementById("img"+i);
    imgPreview.style.margin='5px';
    let inputBtn = document.getElementById("browser-first"+i);
    inputBtn.style.marginright='40px';
    
    if(i%3 == 0){
        j = i+1;
        
        var tr = '';
        tr += '<tr>';
        tr += '  <td>';
        tr += '     <nav class="navbar navbar-expand-lg navbar-light bg-light">';
        tr += '         <div class="collapse navbar-collapse" id="browser-first'+j+'">';
        tr += '         </div>';
        tr += '     </nav>';
        tr += '  </td>';
        tr += '</tr>';
        $('#table_target').find("tbody").append(tr); 
    }
    
    i++;
}