JSFiddle - React, Tailwind, and code Playground

HTML

<p>
        <label for="spinner">New Lines Required:</label>
        <input id="spinner" name="value" />
        <input type="button" value="OK" id="ok" />
</p>
<div class="order-listing">
            <table id="my-table">
                <tbody>
                    <tr><td>
                        <input type="text" name="name" />&nbsp;&nbsp;
                        <input type="text" name="name" />&nbsp;&nbsp;
                        <input type="text" name="name" />
                        <select>
                            <option value"">abc</option>
                            <option value"">abc</option>
                            <option value"">abc</option>
                            <option value"">abc</option>
                        </select> 
                       <a href=""><img class="img-icons" src="images/delete.jpg" /></a>
                    </td></tr>

                </tbody>
            </table>        

        </div>

JavaScript

$(function() {
 var spinner = $( "#spinner" ).spinner({ min: 0 });

$( "#ok" ).click(function() {
  var spiner_val = spinner.spinner( "value" ) ;
   
 var html = '<tr><td><input type="text" name="name" />&nbsp;<input type="text" name="name" />&nbsp;<input type="text" name="name" />&nbsp;<select><option value="">abc</option><option value="">abc</option><option value="">abc</option><option value="">abc</option></select><a href=""><img class="img-icons" src="images/delete.jpg" /></a></td></tr>';
 for(i = 0; i < spiner_val;i++){
     $(html).insertAfter('tr:last');
 }
});

$( "button" ).button();
});